2

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

1 Answer 1

7

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

2
  • Thanks fpr this nice solution but the small line on the left side should be blue (all the time) :/ jsfiddle.net/7FP3J/21
    – Peter
    Jul 17, 2014 at 2:17
  • 1
    Do you mean like this? jsfiddle.net/7FP3J/23 If not, then you might have to edit your question with a better description of what you want, because I am not following. Jul 17, 2014 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.