I need to represent something like a donut chart in SVG. I was trying to draw several arcs inside the same circle, each one with the length defined by a percentage that is previously givven. But with no luck...
Here is a pic:
What I need is that every region will be dynamically defined according to a percentage previously established.
Does anyone knows how can this be done?
@user1835591 What do you think about it?
<svg xmlns="http://www.w3.org/2000/svg" style="transform-origin:50% 50%;transform:rotate(270deg)" stroke-width="8%" fill="none" stroke-dasharray="400%">
<circle cx="50%" cy="50%" r="25%" stroke="#ff8c00"/>
<circle cx="50%" cy="50%" r="25%" stroke-dashoffset="284%" stroke="#7fffd4"/>
<circle cx="50%" cy="50%" r="25%" stroke-dashoffset="318%" stroke="#228b22"/>
<circle cx="50%" cy="50%" r="25%" stroke-dashoffset="352%" stroke="#6495ed"/>
<circle cx="50%" cy="50%" r="25%" stroke-dashoffset="376%" stroke="#4169e1"/>
<circle cx="50%" cy="50%" r="25%" stroke-dashoffset="390%" stroke="#ffa500"/>
</svg>
This is how I've used to resolve a similar situation:
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20">
<circle r="5" cx="10" cy="10" stroke="red" stroke-width="10" />
<circle r="5" cx="10" cy="10" stroke="green" stroke-width="10" stroke-dasharray="calc(60 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
<circle r="5" cx="10" cy="10" stroke="yellow" stroke-width="10" stroke-dasharray="calc(40 * 31.42 / 100) 31.42" transform="rotate(-90) translate(-20)" />
<circle r="5" cx="10" cy="10" stroke-width="10" fill="white" />
</svg>
To calculate percentages You need to calculate the percentage for the last circle "yellow" and then for the second circle "green" you have to calculate the percentage and sum the yellow circle percentage.
Example: