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

Answer 2

Regarding your last bit of inquiry:

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.

Well, π(r*2) or simply 2πr will give you the circumference of a circle, which in turn gives you the appropriate value for the dash-array that completes the circle.

For example:

Your SVG circle has a radius of 90.

2π(90) = 565.48, therefore your dash-array will be 565.48.

If your radius is 45...

2π(45) = 282.74, so your dash-array will be 282.74.

Answer 3

An alternative for 270deg rotation:

transform="matrix(0,-1,1,0,0,200)"