Why aren't the SVG paths showing?

Question

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. 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 .

Here's a 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

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!

Answer 1

You seem to appreciate that you need to create elements in the SVG namespace when creating the <path> with createElementNS. Your problem is that you don't create the <svg> element with that same function.

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.