Dynamicznie utworzony SVG nie działa w przeglądarce Firefox, ale działa w Chrome

Question

Próbuję ustalić, dlaczego ten kod nie działa w Firefoksie. Powinien tworzyć ścieżki poziome, ale nie widzę ich w Firefoksie. Chrome i IE wyświetlają je poprawnie. Co może być problemem?

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

Twoje d parametry ścieżki są nieprawidłowo sformatowane.

Masz coś

d="M 0 100, L 1000 100" 

natomiast powinno być

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

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

Rozwiązaniem jest

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

JSFiddle