Question

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?

My methodology is:

• The SVG ‘canvas’ is 400 by 400px, th0e half circle will have a radius of 180px
• MoveTo point: 20,200 – M20,200
• LineTo: draw a line 360px long & does not change the y position – L360,0
• ArcTo: draw an arc to complete the circle, the radius of the arc is 180px – A180,180 0 0,1 20,200

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?

Answer 1

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:

Note the liberal use of lowercase (relative) commands.