使用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