知識(shí)儲(chǔ)備

1.SVG Path

小測(cè)試

最終效果（扣子丑了點(diǎn)）：

圓形文字

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>

解釋：
透過(guò)SVG的基本方式，在<text>元素里有一個(gè)包含文字的<textPath>元素，<textPath>元素也會(huì)提到一個(gè)<path>元素，該元素透過(guò)id來(lái)定義我們的路徑。（行間SVG里的文字也會(huì)繼承我們大部分的文字樣式）

無(wú)CSS時(shí)的效果：

無(wú)CSS時(shí)的效果

理解一下SVG路徑語(yǔ)法

M 0,50：移動(dòng)（0，50）
a 50,50 0 1,1 0,1 從目前所在的點(diǎn)畫出一個(gè)弧形，從目前位置往右0單位，往下1單位，弧形的水平和垂直半徑都應(yīng)該為50（兩個(gè)弧形里，選擇角度最大的）
z: 透過(guò)一條直線閉合路徑

下一步：
從圓形路徑移除黑色填色

.circular path{  
   fill: none; 
}

下一步：

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

讓邊角隱藏的文字都顯示,并調(diào)整字體大小

 overflow: visible;  

快完成的效果

下一步：

找一張紐扣圖片，調(diào)整一下大小，把文字放入紐扣中
其實(shí)放地球更加有趣

.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;
 }