使用jQuery處理SVG路徑長度

Question

如何將藍線（atm 100％）的長度調整爲70％？

小提琴 http://jsfiddle.net/7FP3J/2/

HTML

<div id="p0">0%</div> 
<div id="p100">100%</div> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path fill="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" id="test"/> 
</svg> 

CSS

#p0 { 
    color: #0074c4; 
    left: 60px; 
    position: absolute; 
    top: 72px; 
} 
#p100 { 
    color: #0074c4; 
    left: 240px; 
    position: absolute; 
    top: 144px; 
} 

JS

setCircleTo(70); 

function setCircleTo(percent) 
{ 
    // percent 
    // $('#test').attr('d','') 
} 

Answer 1

最簡單的方法是使用短陣數組技巧。

function setCircleTo(percent) 
{ 
    var path = $('#test').get(0); 
    var pathLen = path.getTotalLength(); 
    var adjustedLen = percent * pathLen/100; 
    path.setAttribute('stroke-dasharray', adjustedLen+' '+pathLen); 
} 

Fiddle here