SVG - вычислить динамическую текстовую координату

Question

В настоящее время я работаю над «пирогом» SVG, который позволил бы пользователям иметь обзор всех категорий веб-сайта в цветном круге.

На данный момент я могу нарисовать пирог с помощью EventListener на разных формах.

  var svg = document.getElementById('categSVG');
  var startAngle = -89.999;
  var nbCateg = 6;
  var svgMiddleX = svg.width / 2;
  var svgMiddleY = svg.height / 2;
  var segmentWidth = 100;

  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
  }

  function describeArc(x, y, radius, startAngle, endAngle) {

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
      "M", start.x, start.y,
      "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ];

    return d.join(" ");
  }

  function pathGen(nSegment) {
    var newPath;

    for (var i = 1; i <= nSegment; i++) {
      //Adding path
      newPath = document.createElementNS('http://www.w3.org/2000/svg', "path");

      newPath.setAttribute("id", "arc" + i);
      newPath.setAttribute("stroke", '#' + (Math.random() * 0xFFFFFF << 0).toString(16));
      newPath.setAttribute("d", describeArc(150, 150, 100, startAngle, 270));
      newPath.setAttribute("stroke-width", segmentWidth);

      svg.appendChild(newPath);

      startAngle += 360 / nbCateg;
    }
  }

  function init() {
    pathGen(nbCateg);
    var elem;

    for (var i = 1; i <= nbCateg; i++) {
      document.getElementById("arc" + i).addEventListener("click", function() {
        console.log('I would redirect to ' + this.id); //will change
      });
    }
  }

  init();

svg {
  height: 1000px;
  width: 1000px;
}

path {
  fill: none;
}

<svg id="categSVG"></svg>

Но я не могу найти способ отобразить текст (в данном случае html ID) в середине круговой части.

Итак, это мой вопрос, как я могу вычислить координаты X и Y, чтобы поместить текст в середине каждой фигуры?

Обратите внимание, что количество деталей может варьироваться.

Вот моя скрипка (Я использую случайные цвета для тестов)

Спасибо.

Answer 1

После многих попыток я наконец нашел решение:

Во-первых, я включил svg.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>

После этого я добавил это после "svg.appendChild (newPath)":

    bbox = SVG.adopt(newPath).bbox();
    x=bbox.cx;
    y=bbox.cy;

    text.setAttributeNS(null,"x",""+x);
    text.setAttributeNS(null,"y",""+y);
    text.setAttributeNS(null,"font-size","30");

    svg.appendChild(text);

Это решение использует BBOX для вычисления центра x и y объекта пути, после чего вы можете легко задавать параметры вашего текста (не забудьте добавить узел для установки текста).

Надеюсь, это кому-нибудь поможет.