记环形进度条（静态，非动态从0变到100%，svg实现）

环形进度条可以用svg 实现，Element-ui中的环形进度条就是用svg实现的

svg好文链接：
1、推荐！介绍svg实现环形的用法，以及 stroke-dasharray, stroke-dashoffset表示的意义： https://www.cnblogs.com/daisygogogo/p/11044353.html
2、https://jakearchibald.com/2013/animated-line-drawing-svg/
3、国外实现环形进度条好文： https://css-tricks.com/building-progress-ring-quickly/

所以，看了上述几篇文章，才能看下面的svg代码，So，svg的基本知识就不多讲了。

html: （代码用vue书写）

  


  
进度为：{{ initialVal }}
   点我减1
   点我加1
  

css代码：（关于这块也是有点说的， 继续往下看吧~）

Js代码：

来理解一下svg的思路：

Svg 实现环形图的原理是：设置stroke-dasharray虚线长度等于当前圆的周长，间隔大于或者等于圆的周长（这样相当于 虚线长是圆的一周，隔个圆的一周长度，再进行环形（效果就这么出来） ）

而圆的周长怎么算呢， 圆的周长 = 2 * Pi * r(圆的半径)

所以初始mounted函数中，代码中，设置了元素的strokeDasharray 为周长，间隔等于周长，

mounted() {
          const el = document.querySelector('.progress-ring__circle');
          const radius = el.r.baseVal.value;
          this.perimeter = 2 * Math.PI * radius;
          // 虚线长为周长，间距为周长，如此循环
          el.style.strokeDasharray = `${this.perimeter} ${this.perimeter}`;
          this.setOffset();
},

而this.setOffset()的作用是对线条设置偏移，实现动态变化，上述文章也说了：

image.png

而我们的svg circle，当设置了stroke-dashoffset时，默认其出发点是为中心的垂直和水平向右倾斜。所以有必要负的角度旋转圆，来获得想要的效果。

未对环形设置样式之前，是这样的：

image.png

加上style样式后，就变成我们想要的，从12点方向开始顺时针旋转，如下图

.progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

image.png

这里，transform 和transform-origin 的用法，有一篇不错的文章讲的很棒：http://www.360doc.com/content/20/0710/23/25947829_923464975.shtml， 当然你也可以参考我的这篇文章进行阅读学习：https://www.jianshu.com/p/074cb7116537

接上面offset设置，初始执行了函数setOffset, 总周长 减去 百分比周长，得到的是个正数，上面截图怎么说来着，
* offset 为正数，向左 偏移 offset 个单位
* offset 为负数，向右 偏移 offset 个单位

image.png

const offset = this.perimeter - (this.initialVal/100) * this.perimeter;

默认没设置strokeDashoffset、也没设置上述的样式（旋转等），circle是个满圆，现在设置了个正数，即可以这么理解，即满足我们的要求了

image.png

而当点击点我减一的按钮时，百分比持续减少，根据 被减数 - 减数 = 差，百分比就是里面的减数，被减数不变，减数持续减少，得到的差即offset值就变得越来越大，即每次向左往回拉的就越厉害，视觉看起来就是逆时针走

同理，当点击点我加一的按钮时，百分比持续增大，根据 被减数 - 减数 = 差，百分比就是里面的减数，被减数不变，减数持续增大，得到的差即offset值就变得越来越小，即每次向左往回拉的就越小，视觉看起来就是顺时针走