为什么未显示SVG路径？

Question

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

这是最奇怪的部分…… 它们仅显示是否在我进入我的inspect元素内，稍微编辑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设置后，就不能设置它了。