Warum werden die SVG-Pfade nicht angezeigt?

Question

Ich habe eine SVG, die auf einigen Knoten sitzt, und dann zeichne ich diese SVG-Pfade dynamisch, so dass sie sich mit solchen Knoten verbinden können. Sobald ich jedoch die Pfade erstellt habe, werden meine Pfade aus irgendeinem Grund nicht angezeigt.

Hier ist der seltsamste Teil ... Sie zeigen nur, wenn ich in meine inspect-Element gehen, bearbeiten Sie die HTML ein wenig, und rendern Sie es erneut.

Hier ist ein gif:

Hier ist der Code, der die Pfade erzeugt:

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'); 

Es ist besser, wenn Sie tatsächlich an einem konkreten Beispiel aussehen, also habe ich habe hier einen Stift: http://codepen.io/anon/pen/OWaEdd

Bitte helfen Sie einem Kerl in Not. Ich möchte wissen (und beheben), warum meine Pfade nicht angezeigt werden, wenn die Pfade generiert werden. Ich werde es sehr schätzen!

Answer 1

Sie scheinen zu schätzen, dass Sie beim Erstellen der <path> mit createElementNS Elemente im SVG-Namespace erstellen müssen. Ihr Problem ist, dass Sie das <svg> Element mit der gleichen Funktion nicht erstellen.

Der nachfolgende Aufruf von setAttribute für 'xmlns' ist falsch und kann entfernt werden, der Namespace ist ein Nebeneffekt der Elementerstellung, es kann nicht nachträglich mit setAttribute gesetzt werden.