超級簡單三步實現svg圓形進度條

先上效果圖

前置知識

<circle> 定義一個圓

• circle有三個屬性

  • cx=“圓的x軸座標”
  • cy=“圓的y軸座標”
  • r=“圓的半徑”

• svg的基本屬性

  • fill 填充
  • stroke 描邊顏色
  • stroke-width 描邊寬度
  • stroke-dasharray 創建線條（這個屬性是實現的關鍵）

  ok 然後開始畫圖，首先按照circle的屬性畫出兩個圓

<svg> 
<circle cx='70' cy='70' r='70'></circle>                
<circle cx='70' cy='70' r='70'></circle>
</svg>

第一步的效果應該是這樣的

第二步按照上面提到的svg的基本屬性添加樣式

svg circle {            
fill: none;            
stroke: #e4e4e4;            
stroke-width: 10px;            
transform: translate(5px, 5px);       
}

得到如下

第三步把第二個圓的顏色改成藍色，並且計算好它與周長的比例關係

svg circle:nth-child(2){        
stroke: cornflowerblue;        
stroke-dasharray: calc(70/100*440),440;        
}

得到如下（70%）

這裏的440是圓的周長，
通過 r=“圓的半徑”=70
周長=r×2×PI
得到周長等於440

以上