CODEWITHSUNDEEP
htmlcsssvg
Ben Juneau
Ben Juneau

Reputation: 11

SVG finding CY, CX of circle with rotate and stroke applied

This is my first question on here, so apologies if it's not formatted appropriately. I am playing around with radial progress bars using SVG and CSS animations. However, I'm having a difficult time determining the radius and CY, CX values. The total width of my SVG is 140px, so I figured my radius is 70px, but I have a 14px stroke applied to that, so would it be 63px? Also, with rotate, I notice you have CY, CX too which defines the center point of your circle. I guess that would be the same as my radius?

Here's a fiddle to illustrate. You'll see that the circle doesn't fit inside the container precisely. What am I doing wrong, and how are these values calculated?

<svg width="140" height="140">
    <circle class="outer" cx="70" cy="70" r="63" transform="rotate(-90, 70, 70)"/>
</svg>

My Fiddle: https://jsfiddle.net/xu402goo/

Thanks! :)

Upvotes: 1

Views: 715

Answers (1)

Ben Juneau
Ben Juneau

Reputation: 11

I think I figured out the issue. The FF bug fix seems to be causing problems, but my cx, cy, and r seem right.

-moz-transform: rotate(-89deg) translateX(-140px);

https://jsfiddle.net/xu402goo/1/

I don't know if there is a benefit to using viewBox over width/height?

Upvotes: 0

Related Questions