Jump to content
  • Advertisement
Sign in to follow this  

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

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

If you intended to correct an error in the post then please contact us.

Recommended Posts


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:
019H2.png CfAS1.png
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" />

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.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!