不使用 CSS 或 JS 创建 SVG 饼图的数学

Question

我正在寻求用纯 SVG 创建饼图。我不想使用 JS 或 CSS，而该网站上的大多数解决方案都使用它们。我发现了这篇很棒的文章，解释了如何在纯 SVG 中创建饼图：https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

\n

问题是这篇文章只描述了如何制作一片。我正在寻求创建一个最多可以包含 360 个元素的饼图（其中饼图的每个切片将是 \xe2\x80\xad0.27\xe2\x80\xac% ）。

\n

我尝试在以下示例中通过将其旋转到 -89 而不是 -90 来创建另一个楔子，但我没有得到我正在寻找的结果：https: //codepen.io/HexylCinnamal/pen /KKwEjpK

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

我想知道是否需要做任何数学计算来计算正确的角度和平移，以使蓝色楔形出现在红色楔形旁边。

\n

Answer 1

不幸的是，calc()计算属性stroke-dasharray仅适用于Chrome

对于跨浏览器的解决方案，需要计算并分配中风破折号数组中的值。

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. 蓝色=“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>