svg 实现圆环倒计时效果

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

二、接下来看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)

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

三、最后来看三个属性：