svg画个圆形进度条

好记性不如烂笔头，记录一下~

效果：

代码：

思路：大小由外部框子控制，里面全部使用百分比。

1. 画两个大小相同的圆形，内部不填色，利用描边显示环形；

2. 底层圆环设置灰色；

3. 上层圆环设置需要的颜色，本例设置的蓝色；

4. 需要知道的数据，百分比rate，描边宽度strokeWidth，需要计算的数据：

1. 半径：(总宽 度 - 描边宽度) / 2;

2. stroke-dasharray的破折号长度：周长2πr 2 * Math.PI * r

3. stroke-dashoffset 偏移量，通过stroke-dasharray和stroke-dashoffset控制蓝边的显示：周长 - 百分比占的周长长度

4. 动态效果用css的动画，控制stroke-dashoffset从最大值stroke-dasharray的值到stroke-dashoffset 偏移量

5. 中间文本可以利用svg文本框添加，也可以直接在svg外加div，利用定位放在svg上；相对来说灵活一些

知识点记录：

1. svg的circle属性：

1. cx：圆心x坐标

2. cy：圆形y坐标

3. r: 圆半径

4. fill：填充颜色，none不填充，

5. stroke-width：描边宽度

6. stroke：描边颜色

7. stroke-dasharray：用于绘制以虚线呈现的SVG形状的笔触。之所以称为“破折号数组”，第一个值是破折号长度，第二个值是空白长度

8. stroke-dashoffse：偏移量

9. stroke-linecap：描边线帽，round圆角，因为有这个帽子（占一定宽度）的原因，rate为0的时候需要特殊处理一下，上层圈描边颜色改为和底层一致；

没帽

有圆帽

2. css用到的属性

1. transform-origin: center; 沿着中心选择

2. transform: rotate(-90deg); 逆时针选择90度

不旋转之前

旋转之后

3. animation: circleProgress 1s 1; 动画用1s执行circleProgress 1次

4. @-webkit-keyframes circleProgress{ from{ stroke-dashoffset: ${dasharray}${unit}; } to { stroke-dashoffset: ${end}${unit}; }} 定义动画