Вычисление SVG-позиции донышка этикетки на стороне сервера

Question

Как рассчитать текстовую метку среза, которая будет размещена непосредственно в центре среза на диаграмме 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>

Вот jsfiddle svg.https://jsfiddle.net/xgyzvnka/

Answer 1

Вот как бы я это сделал.Пожалуйста, измените значение perc.Пожалуйста, прочитайте комментарии в моем коде.

let r = 16;//circles radius
let perc = .15//percentage
//the angle used to draw the circle
let angle = 2*Math.PI * perc;
// the circle's circumference
let totalLength = base.getTotalLength();
//the length of the dash 
let length_perc = totalLength * perc;
//the length of the gap
let difference = totalLength * (1 - perc);

test.setAttributeNS(null,"stroke-dasharray",length_perc+", "+difference);
//rotate backwards 90degs. The center of rotation is the center of the circle; 21,21
test.setAttributeNS(null,"transform","rotate(-90,21,21)");

//the point where to draw the circle
let textPoint = {x:21 + r * Math.cos((angle - Math.PI)/2),
                 y:21 + r * Math.sin((angle - Math.PI)/2)}
text.setAttributeNS(null,"x",textPoint.x);
text.setAttributeNS(null,"y",textPoint.y);
//the text
text.textContent = perc * 100 + "%";

text{text-anchor:middle; dominant-baseline:middle;}
svg{width:90vh;}

<svg viewBox="0 0 42 42">
  <circle id="base" cx="21" cy="21" r="16" fill="transparent" stroke="#d2d3d4" stroke-width="3" />
  <circle id="test"
    cx="21"
    cy="21"
    r="16"
    fill="transparent"
    stroke="#b1c94e"
    stroke-width="3"
  />

  <text id="text"  font-size="6" text-anchor="middle"> </text>
</svg>