Dynamically created SVG not working in Firefox, but works in Chrome

I am trying to figure out why this code of is not working in Firefox. It's supposed to create horizontal paths, but I cannot see them in Firefox. Chrome and IE showing them properly. What could be the issue?

http://ift.tt/1DX1b9E

<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://ift.tt/nvqhV5", "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);
}
});