为什么不显示SVG路径？

我有一个位于某些节点顶部的SVG，然后我动态地绘制这些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

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

来源

2017-02-11 George Edward Portillo

笔在Safari和Chrome中对我来说工作得很好。 – jcaron

@jcaron我的回答得到了回答！但是你提出了一个很好的观点。我会继续并再次“打破”我的剧本。我在那里发表评论如何解决它。谢谢！ –

您似乎明白，您需要在使用createElementNS创建<path>时在SVG名称空间中创建元素。你的问题是，你不会创建具有相同功能的<svg>元素。

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

来源

2017-02-11 00:24:38

这就是交配！很简单。我是100％我在某个时候尝试过，但似乎事后设置属性让我感到困惑。 –

为什么不显示SVG路径？

回答

相关问题