纯SVG实现进度圈
进度圈(Progress Circles)是经典的仪表盘元素，可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染，再配合CSS，图片或者利用SVG实现一个进度圈。
使用SVG实现一个进度圈并没有想象中那么难，我们先从基本的开始：
创建背景
首先，创建一个半径为90px的圆形，然后使用cx,cy设置SVG元素的圆心位置。
我在这里还添加了一些样式属性，比如3px的灰色轮廓。
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<circle r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/>
</svg>
添加进度条效果
现在需要在刚才的背景上再添加一个表示进度的圆形：
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<circle id="backdrop" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/>
<circle id="progress" r="90" cy="120" cx="120" stroke-width="4" stroke="red" fill="none"/>
</svg>
好了，现在我们已经画好了需要的两个圆，可以想象，100%可以用一个全红的圆形表示，但是，如果我想表示一个具体的百分比呢？
stroke-dasharray与stroke-dashoffset
接下来需要书写CSS，SVG提供了stroke-dasharray和stroke-dashoffset两个属性，它们可以将刚才的圆形的轮廓变成虚线。如果两个属性都被设置成100px,会有下面的效果：
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
}
然后，我们可以使用@keyframe为其添加一些动画：
#progress {
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
animation: progressAnimation 600ms linear infinite;
}
@keyframes progressAnimation {
from {
stroke-dashoffset: 100px;
}
to {
stroke-dashoffset: 300px;
}
}
实现具体百分比的表示
到目前为止，动画效果，进度圆和背景圆都已经完成，最后的工作就是使用stroke-dashoffset将给定的百分比表示出来，这可能会涉及到数学方面的知识。
在这里我们使用Sass完成这项工作，当然，利用JavaScript和CSSDOM这个组合也可以实现我们想要的效果(可以处理浮点数的情况)。
$radius: 90;
$percent: 83;
$circumference: (pi() * (2 * $radius));
$stroke_percentage: $circumference - (($percent / 100) * $circumference);
#progress {
stroke-dasharray: $circumference;
stroke-dashoffset: $circumference;
}
#progress {
animation: progressAnimation 1600ms linear 500ms forwards;
transition: stroke-dasharray 400ms linear;
}
@keyframes progressAnimation {
to {
stroke-dashoffset: $stroke_percentage;
}
}
首先，我们设置了一些需要用到的变量，$radius(圆的半径)，percent(需要展示的百分比)，$circumference(圆的周长)。
接下来，对$circumference做减法算出stroke-dashoffset的值。
如果你尝试运行这个例子，会发现圆的进度条会以3点钟方向为起点，为了修正这个问题，我们需要将整个SVG 逆时针旋转90°
完成
在这里我添加了一些其它的效果，这些效果多少也都会涉及一些数学知识。
如果你有任何的问题，可以在文章下面留言。另外，在前面示例的基础上采用一些JavaScript代码来处理进度条百分比的效果：
本文根据@Alex Pate的《Pure SVG Progress Circles》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://alexpate.uk/journal/pure-svg-progress-circles。
Gloria
如需转载，烦请注明出处：https://www.fedev.cn/svg/pure-svg-progress-circles.htmljordans for sale infrared