如何动态地将具有“d”属性的路径添加到 svg [重复]答案

【问题标题】：How to add a path with 'd' attributes to a svg dynamically [duplicate]如何动态地将具有“d”属性的路径添加到 svg [重复]
【发布时间】：2015-11-05 18:39:51
【问题描述】：

我在使用 javascript 在空 svg 中动态生成路径元素时遇到问题。我对使用第三方库不感兴趣，我想了解它在 vanilla javascript 中的工作原理。对于下面的codepen，为了简单起见，我使用 jQuery。

这里是那些对访问 codepen 链接不感兴趣的人的 javascript：

$(function() {
  function calculateX(degrees, radius) {
    var radians = Math.PI * degrees / 180;
    return Math.ceil(radius + (radius * Math.cos(radians)));
  }

  function calculateY(degrees, radius) {
    var radians = Math.PI * degrees / 180;
    return Math.ceil(radius + (radius * Math.sin(radians)));
  }
  var d, opacity, len = 6,
    path, endAngle, degrees = 360 / len,
    startAngle = 270;
  for (var i = 0; i < len; i++) {
    opacity = 'rgba(255,0,0,' +parseFloat((i / len).toPrecision(2)) + ')';
    endAngle = (startAngle + degrees) % 360;
    d = 'M100 100 L' + calculateX(startAngle, 100) + ' ' +
      calculateY(startAngle, 100) + ' A100 100 0 0 1 ' +
      calculateX(endAngle, 100) + ' ' +
      calculateY(endAngle, 100) + ' Z';
    path = $('<path>').appendTo('svg');
    path.css({'background': opacity, 'fill': opacity});
    path[0].setAttribute('d', d);
    startAngle = endAngle;
  }

});

如果我将开发者控制台生成的 html 剪切并粘贴到 codepen 的 html 部分，结果正是我想要的，所以我认为我的 d 属性生成正确，似乎 DOM 不是正确更新或需要某种信号来重绘 svg？

这是生成的 html 片段：

&lt;svg viewBox="0 0 200 200"&gt;&lt;path d="M100 100 L100 0 A100 100 0 0 1 187 50 Z" style="fill: rgba(255, 0, 0, 0); background: rgba(255, 0, 0, 0);"&gt;&lt;/path&gt;&lt;path d="M100 100 L187 50 A100 100 0 0 1 187 150 Z" style="fill: rgba(255, 0, 0, 0.168627); background: rgba(255, 0, 0, 0.168627);"&gt;&lt;/path&gt;&lt;path d="M100 100 L187 150 A100 100 0 0 1 100 200 Z" style="fill: rgba(255, 0, 0, 0.329412); background: rgba(255, 0, 0, 0.329412);"&gt;&lt;/path&gt;&lt;path d="M100 100 L100 200 A100 100 0 0 1 14 150 Z" style="fill: rgba(255, 0, 0, 0.498039); background: rgba(255, 0, 0, 0.498039);"&gt;&lt;/path&gt;&lt;path d="M100 100 L14 150 A100 100 0 0 1 14 50 Z" style="fill: rgba(255, 0, 0, 0.670588); background: rgba(255, 0, 0, 0.670588);"&gt;&lt;/path&gt;&lt;path d="M100 100 L14 50 A100 100 0 0 1 100 0 Z" style="fill: rgba(255, 0, 0, 0.831373); background: rgba(255, 0, 0, 0.831373);"&gt;&lt;/path&gt;&lt;/svg&gt;

【问题讨论】：

标签： javascript html svg

【解决方案1】：

当您在不同的命名空间中创建对象时，您必须使用document.createElementNS() 而不是document.createElement()。

JQuery 的 appendTo() 函数不会调用 createElementNS()，因此尽管您的代码正在创建一个完全有效的 SVG 元素，但您什么也看不到，因为 HTML 解析器不理解它。

这行得通：

$(function() {
  function calculateX(degrees, radius) {
    var radians = Math.PI * degrees / 180;
    return Math.ceil(radius + (radius * Math.cos(radians)));
  }

  function calculateY(degrees, radius) {
    var radians = Math.PI * degrees / 180;
    return Math.ceil(radius + (radius * Math.sin(radians)));
  }
  var d, opacity, len = 6,
    path, endAngle, degrees = 360 / len,
    startAngle = 270,
    svg = document.getElementById('piechart'),
    ns = 'http://www.w3.org/2000/svg';
  for (var i = 0; i < len; i++) {
    fill = 'rgba(255,0,0,' +parseFloat((i / len).toPrecision(2)) + ')';
    endAngle = (startAngle + degrees) % 360;
    d = 'M100 100 L' + calculateX(startAngle, 100) + ' ' +
      calculateY(startAngle, 100) + ' A100 100 0 0 1 ' +
      calculateX(endAngle, 100) + ' ' +
      calculateY(endAngle, 100) + ' Z';
    path = document.createElementNS(ns,'path');
    path.setAttribute('fill', fill);
    path.setAttribute('d', d);
    svg.appendChild(path);
    startAngle = endAngle;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg id="piechart" xmlns="http://www.w3.org/2000/svg"
     width="200" height="200" viewBox="0 0 200 200">
</svg>

【讨论】：