SVG制作环形进度条

病毒横行，不出门，干脆在家里学习吧~

先看效果：

我们来做一个简单版本的。需要用到的SVG知识点：

1、圆形标签 circle

<circle cx="110"  cy="110"   r = "100"
                fill="none"  stroke="#eee" stroke-width="20">
</circle>

cy   ，cy : center  x  ,  center  y 坐标。圆的中心坐标。

r ： radius  半径。

fill ： 填充色。不需要填充，只要圆环。

stroke：描边颜色，灰色。

stroke-width：描边粗细，20 坐标单位。这个单位不一定是像素，在100%比例下，可以看成像素。

2、文本的设置

<text x="0" y="0" fill="red" class="txt" id="txt"
              transform="translate(110,100)">
  0%
</text>

x，y：文本起点坐标。

transform：变形。这里做了一个位移，更改文本的“原点坐标” 为SVG 的正中心，靠上点。本 SVG 的宽高设置的是 220。

3、SVG 变形属性：位移，旋转

4、SVG 的描边CSS代码：

stroke-dasharray: 0  1000;

两个值：实现段长度，虚线段长度。通过实线段长度变化，实现进度变化。这个是关键样式~！

开始：

第一步：构造进度圆环。要用到两个 circle，一个 灰色背景环，一个红色进度环。

HTML：

<svg width="220" height="220" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
    <circle cx="110"  cy="110"   r = "100"
            fill="none"  stroke="#eee" stroke-width="20">
    </circle>
    <circle cx="0"  cy="0"   r = "100" class="mycircle" id="progressRound"
            transform="translate(110,110) rotate(-90)">
   </circle> 
</svg>

CSS：

 .mycircle{
            stroke: #f00;
            fill:rgba(0,0,0,0);
            stroke-width: 10px;
            stroke-dasharray: 0  1000;
 }

尽量把两个环做到SVG的中心去。

特别强调作为进度条的环，因为默认的开始点在右边，所以，需要旋转-90度，让从上方开始环形。但是，默认的旋转点是（0，0）坐标，所以需要更改这个换的“原点”，需要 位移（translate）更改“原点坐标”为 SVG 的正中心。

.mycircle 的样式，可以写成属性。这里写成CSS，是告诉读者，也可以用CSS控制。

第二步，添加环形的文字。

HTML：

<svg width="220" height="220" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
    <circle cx="110"  cy="110"   r = "100"
            fill="none"  stroke="#eee" stroke-width="20">
    </circle>
    <circle cx="0"  cy="0"   r = "100" class="mycircle" id="progressRound"
            transform="translate(110,110) rotate(-90)">
    </circle>
    <text x="0" y="0" fill="red" class="txt" id="txt"
          transform="translate(110,100)">
        0%
    </text>
    <text x="0" y="0" fill="#555" class="txt txt2"
          transform="translate(110,130)">
        CPU占有率
    </text>
</svg>

CSS：

 .txt{
            text-anchor: middle;
            /* 文本水平居中 */
            dominant-baseline: middle;
            /* 文本垂直居中 */
            font-size: 30px;
            font-family: Arial;
}
.txt.txt2{
            font-size:18px;
}

注意这里的CSS 文字控制，跟普通HTML CSS 文字控制不一样哦~~ 

text-anchor 是以文本的起始坐标 y 为基准（这里是 x，y 属性的值。当然，这个文本被transform 调整了“原点”），水平对齐方式，开始start | 中间middle | 结束end。

dominant-baseline ， 则是以起始坐标 x 轴为基准，文字上下的对齐方式。

效果如下：

第三步：用JavaScript 控制进度。这里，就用计时器模拟进度数据变化。

// 找标签
let progressRound = document.querySelector("#progressRound");
let txt = document.querySelector("#txt");
// 进度数据，默认为 0
let jindu = 0;
// let roundLength = Math.PI*2*100;
let jinduLength = Math.PI*2;
let goFun = ()=>{
    jindu +=0.5 ;
    let strokeLength = jinduLength*jindu ;
    txt.innerHTML = jindu +"%";
    // 更改环形样式，控制进度变化：实线段长度。
    progressRound.style.strokeDasharray = strokeLength+" 1000";
    // 如果进度为 100 ，那么终止计时器。
    if( jindu === 100 ){
        clearInterval( myset );
    }
};
// 启动计时器
let myset = setInterval(function(){
    goFun();
},50);

具体 JS 含义，参看注释。

效果如下：

感觉还不错。

还可以把进度条改成渐变色的。

先要修改CSS，把渐变色用上：（2020-1-31 补充）

.mycircle{
            stroke: url(#orange_red);   /*  描边运用渐变色 */
            fill:none;
            stroke-width: 10px;
 }

修改 SVG 代码如下：

<svg width="220" height="220" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
        </linearGradient>
    </defs>

    <circle cx="110"  cy="110"   r = "100"
            fill="none"  stroke="#eee" stroke-width="20"
        ></circle>
    <circle cx="0"  cy="0"   r = "100" class="mycircle" id="progressRound"
            transform="translate(110,110) rotate(-90)"
    ></circle>
    <text x="0" y="0" fill="red" class="txt" id="txt"
          transform="translate(110,100)"
    >0%</text>
    <text x="0" y="0" fill="#555" class="txt txt2"
          transform="translate(110,130)"
    >CPU占有率</text>
</svg>

效果如图所示：

完毕。纯手打的文字，居然写了半个多小时~