问SVG -计算动态文本坐标

EN

  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>