CODEWITHSUNDEEP
htmlsvg
sazr
sazr

Reputation: 25938

SVG Half Circle: Why is it rotated?

I am experimenting with SVG elements. I am trying to create a simple half circle but my half circle is rotated for some reason? How can I get the half circle to not rotate?

enter image description here

My methodology is:

In code this is:

<svg width="400" height="400">
    <path d="M20,200 L360,0 A180,180 0 0,1 20,200 z"
        style="fill:#ff0000;
            fill-opacity: 1;
            stroke:black;
            stroke-width: 1"/>
</svg>

PS: If I want to create a pie chart that is only 275degrees, would the best way be to make 2 paths, one 180degrees(the half circle above) & another path of 90 degrees? Or is it possible to create this with 1 Path? Is so would anyone be kind enough to show an example SVG code?

Upvotes: 9

Views: 20865

Answers (1)

Nick T
Nick T

Reputation: 26767

When using the lineto command, uppercase-L (L) specifies an absolute coordinate while lowercase-L (l) specifies a relative move. It seems like you wanted to use the relative command.

As far as an example, the pie-chart-like one on the W3 path's page uses a single path:

<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
    fill="red" stroke="blue" stroke-width="5" />

produces the red part in this image:

example image

Note the liberal use of lowercase (relative) commands.

Upvotes: 11

Related Questions