無需使用 CSS 或 JS 即可創建 SVG 餅圖的數學運算

Question

我正在尋求在純 SVG 中創建餅圖。 我不想使用 JS 或 CSS，本網站上的大多數解決方案都使用了它們。 我看到了這篇很棒的文章，它解釋了如何在純 SVG 中創建餅圖： https : //seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

問題是這篇文章只介紹了如何只制作一個切片。 我正在尋求創建一個最多可包含 360 個元素的餅圖（其中餅圖的每個切片將是其中的 0.27%）。

我試圖在以下示例中創建另一個楔形，方法是將其旋轉到 -89 而不是 -90，但我沒有得到我正在尋找的結果： 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>

我想知道是否需要做任何數學計算來計算正確的角度和平移，以使藍色楔形出現在紅色楔形旁邊。

Answer 1

不幸的是， calc()計算屬性stroke-dasharray只適用於Chrome

對於跨瀏覽器的解決方案，需要在stroke-dasharray 中計算和賦值。

stroke-dasharray ="Circumference * 0.35, Circumference"或stroke-dasharray = "31.4 * 0.35, 31.4"或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>

對於兩個段：

1. 紅色="35%"
2. blue="15%" stroke-dasharray = 31.4 * 0.15, 31.4或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>

我們看到藍色部分與紅色部分重疊； 因此，需要將藍色扇區移動等於紅色扇區長度10.99

添加移動藍色扇區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>

四大板塊

該解決方案適用於所有現代瀏覽器，包括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

解決問題的一種簡單方法是使用不同的viewBox ： "-10 -10 20 20"使點0,0成為 svg 畫布的中心。 請注意，您不再需要cx和cy屬性，並且變換只是旋轉。

我假設你想把圓分成 100 份。 在這種情況下，您需要將第二個圓旋轉 -90 + 360/100 或 -90 - 360/100 度。

 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>