CODEWITHSUNDEEP
jquerysvgpath
Peter
Peter

Reputation: 11835

Manipulate SVG path length with jQuery

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','') 
}

Upvotes: 2

Views: 9513

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

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

Upvotes: 8

Related Questions