效果：
HTML：
~~~
<svg width="90" height="90" style="background-color: #ddd;">
<path d="M90 45A45 45 0 1 1 45 90" stroke="#205565" stroke-width="6" fill="none" r="45" cx="45" cy="45" style="stroke-dashoffset: 0;stroke-dasharray: 3;"></path>
<text x="30" y="50" fill="#205565">1%</text>
</svg>
~~~
JS：
~~~
var i = 0,
pathSelector = document.querySelector('svg path'),
textSelector = document.querySelector('svg text');
function draw() {
i++;
if(i < 100) {
var r = 45;
var ang = (360 * i/100) * (Math.PI/180);
x2 = 45 + r*Math.cos(ang),
y2 = 45 + r*Math.sin(ang);
pathSelector.setAttribute('d', 'M90 45A45 45 0 '+(i>50?1:0)+' 1 '+x2+' '+y2);
window.requestAnimationFrame(draw);
}
textSelector.textContent = i+'%';
}
draw();
~~~
**原理：**
不断的通过改变A指令终点坐标来实现的
**知识点讲解：**
1、path的A指令，全称Elliptical Arc，允许不闭合。可以想像成是椭圆的某一段，共七个参数。
> 1. RX,RY指所在椭圆的半轴大小
> 2. XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
> 3. FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
> 4. FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
> 5. X,Y为终点坐标
2、FLAG1参数，在画前半圆的时候置0，画后半圆的时候置1
3、已知圆心，半径，角度，求圆上的点坐标？
~~~
var cx = 45,
cy = 45,
r = 45,
ang = 60;
var x = cx + r*Math.cos(ang*Math.PI/180),
y = cy + r*Math.sin(ang*Math.PI/180);
~~~
4、图解Math.sin()，Math.cos()
5、角度与弧度的转换
~~~
1度＝π/180 弧度 ( ≈0.017453弧度 )
弧度＝度 × π/180
~~~
6、window.requestAnimationFrame方法告诉浏览器您希望执行动画并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用
**进阶效果**加个offset：
HTML：
~~~
<svg width="90" height="90" style="background-color: #ddd;">
<path d="M81 45A36 36 0 1 1 45 90" stroke="#205565" stroke-width="6" fill="none" r="45" cx="45" cy="45" style="stroke-dashoffset: 0;stroke-dasharray: 3;"></path>
<text x="30" y="50" fill="#205565">1%</text>
</svg>
~~~
JS：
~~~
var i = 0,
pathSelector = document.querySelector('svg path'),
textSelector = document.querySelector('svg text');
function draw() {
i++;
if(i < 100) {
var r = 36;
var ang = (360 * i/100) * (Math.PI/180);
x2 = 45 + r*Math.cos(ang),
y2 = 45 + r*Math.sin(ang);
pathSelector.setAttribute('d', 'M81 45A36 36 0 '+(i>50?1:0)+' 1 '+x2+' '+y2);
window.requestAnimationFrame(draw);
}
textSelector.textContent = i+'%';
}
draw();
~~~
