SVG Circle Stroke Origin

Question

I'm having trouble describing the issue, but here goes:

I'm trying to make a SVG circle progress bar and I've found a perfect example of what I want to do without any third part libraries like snap:

http://codepen.io/JMChristensen/pen/Ablch

The problem is that I'm having real issues with changing the origin of the stroke. As you'll notice if you try it out, the origin is on the right hand side. I need it to come from the top.

Now, I'm a developer, so I've tried myself, but I can't for the life of me figure out how to do it. If I change the stroke-dasharray attribute the stroke won't match the percentage set in stroke-dashoffset.

I understand it all comes down to math with the stroke-dasharray value, but I don't quite understand what to do.

The dashoffset is calculated like this:

                var pct = ((100-val)/100)*(Math.PI*(r*2));

And there has to be some kind of correlation between that and the standard dasharray value 565.48. There's no mention of it anywhere.

Answer 1

Add this to the 2nd <circle ...></circle> in the SVG:

transform="rotate(270,100,100)"

Demo here