Dynamisch erstellt SVG funktioniert nicht in Firefox, funktioniert aber in Chrome

Question

Ich versuche herauszufinden, warum dieser Code in Firefox nicht funktioniert. Es soll horizontale Pfade erstellen, aber ich kann sie nicht in Firefox sehen. Chrome und IE zeigen sie richtig an. Was könnte das Problem sein?

https://jsfiddle.net/7a6qm371/

<div> 
<svg width="100%" height="500" id="svgBottomWall"> 
    <g style="stroke: aqua; fill: none;" id="svgBottomWallGridGroup"></g> 
</svg> 

$(document).ready(function() { 

var svgBottomWall = document.getElementById("svgBottomWall"); 
var rect = svgBottomWall.getBoundingClientRect(); 
var svgW = rect.width; 



function createHorizontalLine(w, d) { 
    var nline = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
    nline.setAttribute("d", "M 0 " + d + ", L " + w + " " + d); 
    nline.setAttribute("stroke-width", 1); 
    nline.setAttribute("stroke", "#ffffff"); 
    document.getElementById("svgBottomWallGridGroup").appendChild(nline); 
} 
for (var i = 0; i <= svgW; i = i + 100) { 
    createHorizontalLine(svgW, i); 
} 
}); 

Answer 1

Ihre d Pfadparameter falsch formatiert sind.

Sie haben so etwas wie

d="M 0 100, L 1000 100" 

während es

d="M 0,100 L 1000,100" 

Siehe sollte https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

Das Update ist

nline.setAttribute("d", "M 0," + d + " L " + w + "," + d); 

JSFiddle