为什么不显示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

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

后续对'xmlns'的setAttribute调用是不正确的，可以删除，命名空间是元素创建的副作用，这不是你可以用setAttribute设置的东西。