如何在一个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>

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

示例：

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

Answer 3

你也可以做类似的事情：

<script setup lang="ts">
interface PieProps {
  percentage: number,
  segmentColor: string,
}

const elements: PieProps[] = [
  { percentage: 10, segmentColor: 'red' },
  { percentage: 35, segmentColor: 'blue' },
  { percentage: 25, segmentColor: 'green' },
  { percentage: 30, segmentColor: 'black' },
];

const radius = 14;
const roundCircum = 2 * Math.PI * radius;
const strokeWidth = 3;

const offsets = computed(() => {
  const offset: number[] = [0];
  elements.map((value) => offset.push(offset[offset.length - 1] + ((value.percentage) * roundCircum) / 100));
  return offset;
});
</script>

<template>
  <svg viewBox="0 0 32 32">
    <circle
      v-for="(element, index) in elements"
      :key="element.segmentColor"
      :r="radius"
      cx="50%"
      cy="50%"
      :stroke="element.segmentColor"
      :stroke-dasharray="`${((element.percentage) * roundCircum) / 100}, ${roundCircum}`"
      :stroke-dashoffset="-offsets[index]"
      fill="none"
      :stroke-width="strokeWidth"
    />
  </svg>
</template>