Create SVG progress circle

Question

Anyone know how to create a circle \"progressbar\" in svg? I need to specify the percentage of the circle, så that a color grows in the shape of a cake.

The growing

Answer 1

Shamelessly copy and pasting from the specification:

The path uses the "elliptical arc" command to draw a partial circle. You can either draw several of them, each describing a different circular section, or you give one of them an ID and reference it with . Then you can rotate the . Draw as many of them as you need for granularity (e.g., 100 sectors allow you steps of 0% to 100%).

To colorize them, just set the fill="" attribute of each single sector to the fitting value.