超级简单三步实现svg圆形进度条


先上效果图

在这里插入图片描述
前置知识

定义一个圆

  • circle有三个属性

    • cx=“圆的x轴坐标”
    • cy=“圆的y轴坐标”
    • r=“圆的半径”

  • svg的基本属性

    • fill 填充
    • stroke 描边颜色
    • stroke-width 描边宽度
    • stroke-dasharray 创建线条（这个属性是实现的关键）

    ok 然后开始画图，首先按照circle的属性画出两个圆

1
2
3
4
<svg>
<circle cx='70' cy='70' r='70'></circle>                
<circle cx='70' cy='70' r='70'></circle>
</svg>

第一步的效果应该是这样的
在这里插入图片描述
第二步按照上面提到的svg的基本属性添加样式

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

得到如下
在这里插入图片描述
第三步把第二个圆的颜色改成蓝色，并且计算好它与周长的比例关系

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

得到如下（70%）
在这里插入图片描述

这里的440是圆的周长，
通过 r=“圆的半径”=70
周长=r×2×PI
得到周长等于440

以上