javascript - 为什么不显示 SVG 路径？

Question

我有一个位于某些节点之上的 SVG，然后我动态绘制这些 SVG 路径，以便它们可以连接到这些节点。但是，一旦我生成了路径，由于某种原因，我的路径就没有显示。

这是最奇怪的部分... 它们仅在我进入检查元素、稍微编辑 HTML 并再次渲染它时才会显示。

这是一个 gif:

这是生成路径的代码:

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttributeNS(null, 'id', 'path' + index);
path.setAttributeNS(null, 'd', 'M0 0');
path.setAttributeNS(null, 'stroke', '#484848');
path.setAttributeNS(null, 'fill', 'none');
path.setAttributeNS(null, 'stroke-width', '4px');

如果你真的看一个实际的例子会更好，所以我这里有一支笔:http://codepen.io/anon/pen/OWaEdd

请帮助有需要的人。我想知道(并修复)为什么我的路径在生成路径时不显示。我将不胜感激!

Answer 1

您似乎意识到在创建 <path> 时需要在 SVG 命名空间中创建元素。使用 createElementNS。您的问题是您没有创建 <svg>具有相同功能的元素。

随后对“xmlns”的 setAttribute 调用不正确，可以删除，命名空间是元素创建的副作用，不能在事后使用 setAttribute 设置。