如何创建包含4个扇区的circle SVG？[副本]

Question

我已经为一个有4个扇区的圆创建了一个代码。是否有任何在线的SVG生成器，我可以在这里用SVG创建以下循环，或者有谁可以用SVG代码帮助我？为什么我要在SVG中创建，因为我必须在每个扇区中添加文本。

我发现下面的链接，但这不是我预期的输出。画一个有4个扇区的圆

.wrap {
  position: relative;
}

.circle-donut {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border-top: 140px solid #a3fe01;
  border-bottom: 140px solid #2800eb;
  border-right: 140px solid #dd6479;
  border-left: 140px solid #ead52c;
}

.inlineWrap {
  position: relative;
}

.absolute {
  position: absolute;
}

.inlineWrap .top {
  top: 0;
}

.inlineWrap .bottom {
  bottom: 0;
}

.inlineWrap .left {
  left: 0;
}

.inlineWrap .right {
  right: 0;
}

<div class="wrap">
  <div class="circle-donut"></div>
</div>

Answer 1

您可以使用4倍于同一个圆的笔画-dasharray=“.25*tl.75*tl”，其中tl是圆周的总长度，可以作为圆的周长计算，也可以使用getTotAllength（）方法计算。

对于第一个use元素，stroke-dashoffset=1/8*tf圆周。第二个use元素有stroke-dashoffset=1/8*tf+1/4tf，第三个有stroke-dashoffset=1/8*tf+2/4tf...等

svg{width:95vh}

<svg viewBox="-50 -50 100 100">
<defs>
  <circle id="c" r="40" stroke-width="20" fill="none" stroke-dasharray="62.75 188.25" />
</defs>
  <use xlink:href="#c" stroke="red" stroke-dashoffset="31.375"/>
    <use xlink:href="#c" stroke="gold" stroke-dashoffset="94.125"/>
   <use xlink:href="#c" stroke="blue" stroke-dashoffset="156.875"/> 
     <use xlink:href="#c" stroke="orange" stroke-dashoffset="219.625"/>
</svg>