The origin of the circle SVG

Question

I am having trouble describing the problem, but it says:

I am trying to create an SVG progress bar, and I found a great 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 am having real problems with changing the origin of the strike. As you will notice, if you try this, the source will be on the right. I need him to appear from above.

Now I am a developer, so I tried myself, but I can’t let my life determine how to do it. If I change the stroke-dasharray attribute, the move will not match the percentage set in the stroke-dashoffset parameter.

I understand that it all comes down to mathematics with the assessment of a dashar strike, but I don’t quite understand what to do.

Dashoffset is calculated as follows:

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

And there should be some correlation between this and the standard dasharray value of 565.48. Nothing is mentioned there.

Answer 1

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

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

Demo here

Answer 2

Regarding your last request:

And there should be some correlation between this and the standard dasharray value of 565.48. Nothing is mentioned there.

Well, π (r * 2) or just 2πr will give you the circle circumference, which in turn will give you the corresponding value for the dash array that completes the circle.

For instance:

Your SVG circle has a radius of 90.

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

If your radius is 45 ...

2π (45)= 282.74, - 282.74.

Answer 3

Alternative for 270deg rotation:

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