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 屬性定義了一條線，文本或元素輪廓厚度，即圓環寬度（粗度）