超级简单三步实现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

以上