[SOLVED] SVG Draw a circle with 4 sectors

SVG Draw a circle with 4 sectors

I need to draw a circle with 4 sectors. I'm trying to draw a sector like this:

<path d="M200, 200, l 100,-100 a180,180 0 0,0 -127.27,127.27 z"/>

I got the -127.27, 127.27 from the equations:

x=cos(angle) * radius
y=sin(angle) * radius

My angle is 135, and my radius is 180.

Here's a codepen of what i get. The blue one is the one I'm talking about here, the black one is what I'm trying with different numbers.

Why am i not getting a proper 1/4 of a circle? What am i missing?

Solution

The numbers don't make much sense. You start by moving to (200,200), then draw a straight line to (300,100) (length: 141 units) followed by a circular arc ending at (172.73,227.27) (radius 180 units). Shouldn't the length of the straight line segment at least be equal to the radius of the circle?

You're making life terribly difficult for yourself. If you want to draw four circular segments, a good first step would be to use a <g> element to move the coordinate system to the centre of the circle. Then you can create all four segments using near-identical code.

Here's an example:

<svg width="200" height="200" viewBox="0 0 200 200">
  <g transform="translate(100,100)" stroke="#000" stroke-width="2">
    <path d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#f00"/>
    <path d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#080"/>
    <path d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#dd0"/>
    <path d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#04e"/>
  </g>
</svg>

If you want a circle with a different radius, replace 99 with the radius you want, and replace 70 with this value times sqrt(0.5).

Path data breakdown:

M0 0-70 70

Move to (0,0), then draw a straight line to (-70,70) (the L is implied).

A99 99 0 0 1-70-70

Draw an elliptical arc from this point to (-70,-70) with rx=rx=99, x-axis-rotation=0, large-arc-flag=1, and sweep-flag=0. (The last two parameters are described here).

Close the path.