效果：
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();
~~~
