知识储备

1.SVG Path

---

小测试

最终效果（扣子丑了点）：

圆形文字

html

<div class="circular">
    <svg viewBox="0 0 100 100">
    <path id="circle" d="M 0,50 a 50,50 0 1,1 0 ,1 z"></path>  
    <text>        
      <textPath xlink:href="#circle">circular reasoning works because</textPath> 
    </text>    
</svg>
</div>

解释：
透过SVG的基本方式，在<text>元素里有一个包含文字的<textPath>元素，<textPath>元素也会提到一个<path>元素，该元素透过id来定义我们的路径。（行间SVG里的文字也会继承我们大部分的文字样式）

无CSS时的效果：

无CSS时的效果

理解一下SVG路径语法

M 0,50：移动（0，50）
a 50,50 0 1,1 0,1 从目前所在的点画出一个弧形，从目前位置往右0单位，往下1单位，弧形的水平和垂直半径都应该为50（两个弧形里，选择角度最大的）
z: 透过一条直线闭合路径

下一步：
从圆形路径移除黑色填色

.circular path{  
   fill: none; 
}

下一步：

 .circular svg{    
   overflow: visible;  
   font-size: 1.6em;
}

让边角隐藏的文字都显示,并调整字体大小

 overflow: visible;  

快完成的效果

下一步：

找一张纽扣图片，调整一下大小，把文字放入纽扣中
其实放地球更加有趣

.circular{   
   width: 4em; 
   height: 4em;
   background: url("1.png") ;
   background-size: cover;
   padding: 2em;
}

最终效果

圆形文字 星球圆形文字

完整的CSS

css

.circular{  
   width: 4em; 
   height: 4em;
   background: url("1.png") ;  
   background-size: cover;   
   padding: 2em; 
}

.circular path{   
   fill: none; 
}
 .circular svg{  
   display: block; 
   overflow: visible; 
   font-size: 1.6em;
 }