svg - 如何根据每个圆弧的百分比在一个svg圆中绘制几条圆弧？

Question

我需要在 SVG 中表示类似圆环图的东西。 我试图在同一个圆内绘制几条弧，每条弧的长度都由先前给出的百分比定义。但运气不佳...

这是一张图片:

我需要的是每个区域都将根据先前建立的百分比动态定义。

有谁知道如何做到这一点吗？

Answer 1

这就是我用来解决类似情况的方法:

<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>

计算百分比您需要计算最后一个圆圈“黄色”的百分比，然后对于第二个圆圈“绿色”，您必须计算百分比并对黄色圆圈百分比求和。

示例:

• 黄色 -> 20% -> 计算值(20 * 31.42/100) 31.42
• 绿色 -> 30% -> calc(50 * 31.42/100) 31.42 (50 = 20(黄色) + 30(绿色))