circle{

-webkit-transition:stroke-dasharray.25s;

transition:stroke-dasharray.25s;

}

stroke-width: 畫圖的線條寬度

stroke: 畫筆使用的顏色

fill: 填充(半徑以內都會被填充) -->

第一個參數: 藍色的周長;

第二個參數: 余下的周長 -->

transform="matrix(0,-1,1,0,0,440)"stroke-dasharray="0 1069"stroke-linecap="round">

拖我：

if(window.addEventListener){

varrange=document.querySelector("#range");

varcircle=document.querySelectorAll("circle")[1];

if(range&&circle){

range.addEventListener("change",function(){

varcircleR=170;

varpercent=this.value/100,perimeter=Math.PI*2*circleR;

// 現有的藍色弧長加上灰色弧長

circle.setAttribute('stroke-dasharray',perimeter*percent+""+perimeter*(1-percent));

});

}

}