# Help with SVG Pie Graphs: Is it possible to specify the degrees not points

This topic is 2535 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hello

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. Is there a way to specify a paths degrees arc instead of doing it all by points? Maybe this would be alot easier in HTML5 canvas? Can I specify degrees in a HTML5 canvas or will I still be dealing with the MoveTo, ArcTo point issues?

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.

1. 1
2. 2
Rutin
18
3. 3
khawk
15
4. 4
A4L
14
5. 5

• 10
• 13
• 26
• 10
• 11
• ### Forum Statistics

• Total Topics
633745
• Total Posts
3013667
×