SVG环形进度条

SVG(Scalabe Vetor Graphics)可缩放矢量图作技术，发源自XML家族。其优秀方便的图形表现形式，让其被当下各大浏览器所支持。由于其中可内嵌于html，表现出像dom自身元素一样的性质，而被广泛的用于html中的图形表现。

今天我作为一个小白，根据最近的项目经验和大家分享一个用SVG制作的环形进度条案例。该进度条可动态设置进度值。

首先来看一个完成的demo效果：

下面是页面代码：

<svg  width=160px height=160px version="1.1" >
          <path id="defPath1" fill="transparent" stroke="#CCCCCC" stroke-width="6" d="M42.5,146 A75,75 0 1,1 117.5,146" ></path>
          <path id="circle1" fill="transparent" stroke="#7EC51D" stroke-width="6" d="M42.5,146 A75,75 0 1,1 42.5,146" stroke-dasharray="0">
              <animate id="animate1" attributeName="stroke-dashoffset" from="0" to="0" dur="1s" fill="freeze" />
          </path>
          <rect width="98" height="9" x="32" y="145"style="fill:white;stroke-width:1;"/>
          <circle id="ball1" cx="0" cy="0" r="5" fill="red">
              <animateMotion id="motion1" begin="0s" dur="1s" path="M42.5,146" fill="freeze" />
          </circle>
      </svg>

注：这里的页面代码其实是初始值状态。

后台代码（js/angularjs）：

var PrepareDrawingCircle1 = function(value)
    {
        var circle1 = document.getElementById('circle1');

        //缺口60度
        //这里根据实际情况，将300度分成100份，那么每一份就是rad度
        var rad = Math.PI*(2-1/3)/100;
        var r = 75;//圆环的半径
        var n = Math.floor(value);
        $scope.percentage = 100 - n;
        //目前大小根据界面写死
        var cx = 80;//这里的cx，cy就是svg大小的中心点坐标
        var cy = 80;//
        var cxball = cx + r * Math.sin(Math.PI*(2/3 + 1/2)+n*rad);
        var cyball = cx - r * Math.cos(Math.PI*(2/3 +1/2)+n*rad) + 1;
        var clength = 2 * Math.PI * r * (1-1/6) * n / 100;
        
        
        //非常重要
        var dflag = 0;
        if(Math.PI < n*rad)
        {
            dflag = 1;
        }
        
        var dpath = 'M42.5,146 A75,75 0 ' + dflag + ',1 ' + cxball + ',' + cyball;
        circle1.setAttribute("d",dpath);
        circle1.setAttribute("stroke-dasharray",clength);
        
        var animate1 = document.getElementById('animate1');
        animate1.setAttribute("from",clength);
        
        var motion1 = document.getElementById('motion1');
        motion1.setAttribute("path",dpath);
        
    };

注：

1、只需在需要的地方调用该函数设置进度值就ok了，设置完成后会有一个动画效果，每次进入页面也会触发。

2、本demo中使用的环形半径是75，svg大小设置160X160，四周各自预留了5

3、本demo中下方的开口是60°，你可用根据自己的需要不要开口或者改变开口大小，不过在改变时，你可能会使用到一些和圆相关的数学知识，如圆周长、圆的参数方程等。