SVG - 计算动态文本坐标答案

【问题标题】：SVG - Calculate dynamic text coordSVG - 计算动态文本坐标
【发布时间】：2018-05-15 14:02:39
【问题描述】：

我目前正在开发一个 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;
}

&lt;svg id="categSVG"&gt;&lt;/svg&gt;

但我找不到在饼图部分中间显示文本（在本例中为 html ID）的方法。

这就是我的问题，如何计算 X 和 Y 坐标以将文本放置在每个形状的中间？

请注意，零件的数量可能会有所不同。

Here's my fiddle （我使用随机颜色进行测试）

谢谢。

【问题讨论】：

标签： javascript html svg path

【解决方案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，之后您可以轻松地为文本设置参数（不要忘记附加节点来设置文本）。

希望对某人有所帮助。

【讨论】：