如何在一个svg圆中按每个圆弧百分比画几条圆弧？

Question

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

这是一张照片：

我需要的是，每个区域都会根据预先确定的百分比动态定义。

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

Answer 1

@user1835591 你怎么看？

<svg xmlns="http://www.w3.org/2000/svg" style="transform-origin:50% 50%;transform:rotate(270deg)" stroke-width="8%" fill="none" stroke-dasharray="400%">
 <circle cx="50%" cy="50%" r="25%" stroke="#ff8c00"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="284%" stroke="#7fffd4"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="318%" stroke="#228b22"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="352%" stroke="#6495ed"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="376%" stroke="#4169e1"/>
 <circle cx="50%" cy="50%" r="25%" stroke-dashoffset="390%" stroke="#ffa500"/>
</svg>

Answer 2

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

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

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

示例：

黄色 -> 20% -> 计算 (20 * 31.42 / 100) 31.42
绿色 -> 30% -> 计算（50 * 31.42 / 100）31.42（50 = 20（黄色）+ 30（绿色））

如何在一个svg圆中按每个圆弧百分比画几条圆弧？

How to draw several arcs in an svg circle according to each arc percentage?

svg

automatic-ref-counting

donut-chart