svg 实现圆环倒计时效果

1、先上效果图，项目中须要圆环根据中间的倒计时相应递减：

2、接下来看svg代码实现：
（1）css 部分

#svgContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
  }
  #svgContainer > svg {
    position: absolute;
  }
  circle {
    -webkit-transition: stroke-dasharray .25s;
    transition: stroke-dasharray .25s;
  }

（2）html 部分

<div id="svgContainer">
    <svg width="220" height="220" VIEWBOX="0 0 220 220">
        <circle cx="110" cy="110" r="50" stroke-width="8" stroke="#D1D3D7" fill="none"></circle>
        <circle cx="110" cy="110" r="50" stroke-width="8" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,220)" stroke-dasharray="1069 0"></circle>
    </svg>
    <span id="leftTime">10</span>
</div>

（3）js 部分

//得到第二个圆的引用
  var circle = document.getElementsByTagName('circle')[1];
  var initTime = 10;
  var leftTime = setInterval(function() {
    initTime--;
    if (initTime < 0) {
      initTime = 10;
    }
    $("#leftTime").text(initTime);
    var percent = initTime / 10;
    //圆的周长
    var perimeter = Math.PI * 2 * 50;
    //stroke-dasharray属性的两个参数和必须为周长
    circle.setAttribute('stroke-dasharray', perimeter * percent + ' ' + perimeter * (1 - percent));
  }, 1000)

以上，便可实现动态圆环倒计时效果。

3、最后来看三个属性：

• stroke-dasharray 属性用来建立虚线，本例中可理解为设置svg圆形倒计时周长的有颜色和无颜色的切割线

  

• stroke-dashoffset 属性指定了dash模式到路径开始的距离，即实线虚线绘制的起点距路径开始的距离，至关于css中的 text-indent。如设置 stroke-dashoffset: 20，即表示左边的实线向左移动20像素

tip：能够设置stroke-dashoffset与stroke-dasharray相同的值实现“画线”效果

• stroke-width 属性定义了一条线，文本或元素轮廓厚度，即圆环宽度（粗度）