Association with SOEN

How can I adjust the length of the blue line from 100% to 70%?

setCircleTo(70); function setCircleTo(percent) { // percent // $('#test').attr('d','') } 
 #p0 { color: #0074c4; left: 60px; position: absolute; top: 72px; } #p100 { color: #0074c4; left: 240px; position: absolute; top: 144px; } 
 <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>

1 answer 1

The easiest way is to use the stroke-dasharray .

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

Feed here

Answered: Paul LeBeau