无需使用 CSS 或 JS 即可创建 SVG 饼图的数学运算

Question

I am seeking to create a pie chart in pure SVG. I do not want to use JS or CSS, which most of the solutions on this site utilize. I came across this great article that explains how to create a pie chart in pure SVG: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

The problem is that this article only describes how to make only one slice. I am seeking to create a pie chart that can contain up to a maximum of 360 elements (in which each slice of the pie will be ‭0.27‬% of it).

I have attempted to create another wedge in the following example by rotating it to -89 instead of the -90, but I'm not getting the results I'm looking for: https://codepen.io/HexylCinnamal/pen/KKwEjpK

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" fill="transparent"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10"
    stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-90) translate(-20)"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="blue" stroke-width="10"
    stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-89) translate(-20)"/>
</svg>

I was wondering if there is any math I need to do to calculate the proper angle and translation to make the blue wedge appear next to the red one.

Answer 1

Unfortunately, calc() to calculate the attribute stroke-dasharray only works in Chrome

For a cross-browser solution, it is necessary to calculate and assign values in the stroke-dasharray.

stroke-dasharray ="Circumference * 0.35, Circumference" or stroke-dasharray = "31.4 * 0.35, 31.4" or stroke-dasharray="10.99 31.4"

 <svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; "> <circle r="10" cx="10" cy="10" fill="white" /> <circle r="5" cx="10" cy="10" fill="bisque" stroke="tomato" stroke-width="10" stroke-dasharray="10.99 31.4" /> </svg>

For two segments:

1. red="35%"
2. blue="15%" stroke-dasharray = 31.4 * 0.15, 31.4 or stroke-dasharray ="4.71, 31.4"

 <svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; "> <circle r="10" cx="10" cy="10" fill="white" /> <circle r="5" cx="10" cy="10" fill="bisque" stroke="tomato" stroke-width="10" stroke-dasharray="10.99 31.4" /> <circle r="5" cx="10" cy="10" fill="bisque" stroke="dodgerblue" stroke-width="10" stroke-dasharray="4.71 31.4" /> </svg>

We see that the blue sector overlaps the red sector; therefore, it is necessary to shift the blue sector by an amount equal to the length of the red sector 10.99

Add to shift the blue sector stroke-dashoffset="-10.99"

 <svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; "> <circle r="5" cx="10" cy="10" fill="bisque" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10" stroke-dasharray="10.99 31.4" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="dodgerblue" stroke-width="10" stroke-dasharray="4.71 31.4" stroke-dashoffset="-10.99" /> </svg>

Four sectors

The solution works in all modern browsers including MS Edge

 <!-- https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart --> <svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; "> <circle r="5" cx="10" cy="10" fill="bisque" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10" stroke-dasharray="10.99 31.4" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="dodgerblue" stroke-width="10" stroke-dasharray="4.71 31.4" stroke-dashoffset="-10.99" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="gold" stroke-width="10" stroke-dasharray="9.42 31.4" stroke-dashoffset="-15.7" /> <circle r="5" cx="10" cy="10" fill="transparent" stroke="yellowgreen" stroke-width="10" stroke-dasharray="6.28 31.4" stroke-dashoffset="-25.12" /> <text x="10" y="15" font-size="3px" fill="black" >35%</text> <text x="1" y="14" font-size="3px" fill="black" >15%</text> <text x="4" y="6" font-size="3px" fill="black" >30%</text> <text x="12" y="8" font-size="3px" fill="black" >20%</text> </svg>

Answer 2

One easy way to fix your problem is using a different viewBox : "-10 -10 20 20" making the point 0,0 the center of the svg canvas. Please observe that you don't need the cx and cy attributes anymore and the transformation is only rotating.

I'm supposing that you want to divide the circle in 100 parts. In this case you'll need to rotate the second circle -90 + 360/100 or -90 - 360/100 degs.

 circle{stroke-dasharray:calc(31.4 / 100) 31.4;}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20"> <circle r="10" fill="transparent"/> <circle r="5" fill="transparent" stroke="tomato" stroke-width="10" transform="rotate(-90)"/> <circle r="5" fill="transparent" stroke="blue" stroke-width="10" transform="rotate(-86.4)"/> </svg>