Manipulate SVG path length with jQuery

jquery, path, svg

Solution

The easiest way is to use the dash array trick.

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

Problem

How can I adjust the length of the blue line (atm 100%) to 70%? Fiddle 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','') } ```

Original source