javascript - SVG Circle Stroke Origin - Stack Overflow

admin管理员组

文章数量:1276779

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:

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 e 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 es 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.

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 e 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 es 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.

• javascript
• svg
• geometry

Share Improve this question Follow edited Mar 19, 2015 at 2:53 user1118321 26.4k44 gold badges5858 silver badges8989 bronze badges asked Apr 28, 2014 at 15:35 Joakim WimmerstedtJoakim Wimmerstedt 69911 gold badge1111 silver badges2828 bronze badges 1

• stackoverflow./questions/11202920/… – stark Commented Apr 28, 2014 at 15:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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

Demo here

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 pletes 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.

An alternative for 270deg rotation:

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

本文标签： javascriptSVG Circle Stroke OriginStack Overflow