使用SVG的饼图

Question

I want to create a pie chart that indicates progress 8/8 as whole and 4/8 as half. I already manage to create one but it seems that it started on the 90 degrees angle. i want it to start from 0 degrees. I dont want to use rotation because it has a Text inside

this is what i have so far

 .pie-assign { border-radius: 50%; } .pie-assign circle { fill: yellow; stroke: red; stroke-width: 30; } .circle-0 { stroke-dasharray: 0 100; } .circle-1 { stroke-dasharray: 12.5 150; } .circle-2 { stroke-dasharray: 25 100; } .circle-3 { stroke-dasharray: 37.5 100; } .circle-4 { stroke-dasharray: 50 100; } .circle-5 { stroke-dasharray: 62.5 100; } .circle-6 { stroke-dasharray: 75 100; } .circle-7 { stroke-dasharray: 87.5 100; } .circle-8 { stroke-dasharray: 105 100; } 

 <div style="width:100px; height: 100px;"> <svg class="pie-assign" viewBox="0 0 30 30"> <circle class="circle-1" r="15" cx="15" cy="15" /> <text x="50%" y="50%" text-anchor="middle" fill="gray" dy=".3em">A</text> </svg> </div> 

any help would be appreciated.

Answer 1

You can use rotation without rotating your text content.

For example you can apply it to a <circle> element:

<circle r="15" cx="15" cy="15" transform="rotate(45,15,15)" />

The first value is the rotation in degrees. Second and third value are the coordinates of the rotation center.