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

가장 쉬운 방법은 대시 배열 트릭을 사용하는 것입니다. 이 좋은 솔루션을하지만 왼쪽에있는 작은 라인 FPR

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