Question

I am attempting to create a SVG Pie Graph that is 277 degrees. I have some code that creates a pie graph that looks correct but I am unsure if my code is firstly correct(in the correct positions) & whether I could improve it.

On the left is the pie graph I am attempting to recreate, on the right is my code output:

I have a feeling that my attempt has a central point that is too far to the right(where the 2 lines meet). The circle is meant to be 277 degrees. Is my code correct & if not what how can it be fixed – what do I need to change & to what values?

<svg width="400" height="400">
    <path d="M200,200 h-150,-20 a150,150 0 1,0 150,-150 z"
     fill="red" stroke="blue" stroke-width="5" />
</svg>

PS: Is it possible to just give a degree value for an SVG, because it would be much easier to just say “fill to 277 degrees” instead of using trig for the actual points etc.

Answer 1

Correct path (run to see result)

<svg width="400" height="400" id='pie'>
    <path d="M200,200 L187,100 A100,100 1 1,1 100,200 z"
     fill="red" stroke="blue" stroke-width="2" />
</svg>