[英]Why aren't the SVG paths showing?
I have an SVG that sits on top of some nodes, and then I am drawing those SVG paths dynamically so that they can connect to such nodes. 我有一个位于某些节点顶部的SVG,然后动态绘制这些SVG路径,以便它们可以连接到此类节点。 However, once I generate the paths, for some reason, my paths aren't showing.
但是,由于某种原因,一旦生成路径,我的路径就不会显示。
Here's the weirdest part... They only show if I go inside my inspect element, edit the HTML a little bit, and render it again . 这是最奇怪的部分…… 它们仅显示是否在我进入我的inspect元素内,稍微编辑HTML并再次呈现时 。
Here's a gif: 这是一个gif:
Here's the code that generates the paths: 这是生成路径的代码:
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');
It's better if you actually look at an actual example, so I've got a pen here: http://codepen.io/anon/pen/OWaEdd 最好是您实际看一个实际的例子,所以我在这里有一支笔: http : //codepen.io/anon/pen/OWaEdd
Please help a fellow in need. 请帮助有需要的人。 I'd like to know (and fix) why my paths don't show when the paths are generated.
我想知道(并修复)为什么在生成路径时我的路径不显示。 I will greatly appreciate it!
我将不胜感激!
You seem to appreciate that you need to create elements in the SVG namespace when creating the <path>
with createElementNS. 您似乎很欣赏在使用createElementNS创建
<path>
时需要在SVG命名空间中创建元素。 Your problem is that you don't create the <svg>
element with that same function. 您的问题是您没有使用相同的功能创建
<svg>
元素。
The subsequent call to setAttribute for 'xmlns' is incorrect and can be removed, the namespace is a side effect of element creation, it's not something you can set after the fact with setAttribute. 随后对“ xmlns”的setAttribute的调用是不正确的,可以将其删除,名称空间是元素创建的副作用,使用setAttribute设置后,就不能设置它了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.