Math 在服务器端计算SVG圆环片标签位置

如何计算要直接定位在中的切片文本标签 svg圆环图中切片的中心

我有一个服务器端生成的svg圆环图。我已经正确地实现了图表的各个部分，但是我在计算将每个单独的部分标签放置在其各自部分的中心时遇到了一些问题。标签将是它所占切片的百分比

这是svg的精简版本

<svg width="100%" height="100%" viewBox="0 0 42 42">
  <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" />
  <circle
    cx="21"
    cy="21"
    r="15.91549430918954"
    fill="transparent"
    stroke="#b1c94e"
    stroke-width="3"
    stroke-dasharray="25 75"
    stroke-dashoffset="25"
  />
  <!-- How do I calculate x and y so the text is in the center of the above slice. -->
  <text x="80%" y="30%" font-size="6" text-anchor="middle">25%</text>
</svg>

25%

---

这里是svg的一部分

我就是这样做的。请更改

perc

的值。请阅读我代码中的注释

设r=16//圆半径
设perc=.15//百分比
//用于绘制圆的角度
设角度=2*Math.PI*perc；
//圆的周长
设totalLength=base.getTotalLength（）；
//短跑的长度
设长度_perc=总长度*perc；
//间隙的长度
让差值=总长度*（1-perc）；
test.setAttributeNS（null，“stroke dasharray”，length_perc+，“+差）；
//向后旋转90度。旋转的中心是圆的中心；21,21
setAttributeNS（null，“变换”，“旋转（-90,21,21）”）；
//画圆的点
设textPoint={x:21+r*Math.cos（（angle-Math.PI）/2），
y:21+r*Math.sin（（angle-Math.PI）/2）}
setAttributeNS（null，“x”，textPoint.x）；
setAttributeNS（null，“y”，textPoint.y）；
//正文
text.textContent=perc*100+“%”
text{文本定位点：中间；主基线：中间；}
svg{width:90vh；}
我就是这样做的。请更改
perc
的值。请阅读我代码中的注释


设r=16//圆半径
设perc=.15//百分比
//用于绘制圆的角度
设角度=2*Math.PI*perc；
//圆的周长
设totalLength=base.getTotalLength（）；
//短跑的长度
设长度_perc=总长度*perc；
//间隙的长度
让差值=总长度*（1-perc）；
test.setAttributeNS（null，“stroke dasharray”，length_perc+，“+差）；
//向后旋转90度。旋转的中心是圆的中心；21,21
setAttributeNS（null，“变换”，“旋转（-90,21,21）”）；
//画圆的点
设textPoint={x:21+r*Math.cos（（angle-Math.PI）/2），
y:21+r*Math.sin（（angle-Math.PI）/2）}
setAttributeNS（null，“x”，textPoint.x）；
setAttributeNS（null，“y”，textPoint.y）；
//正文
text.textContent=perc*100+“%”
text{文本定位点：中间；主基线：中间；}
svg{width:90vh；}

这非常有用。非常感谢你！这很有帮助。非常感谢你！