Đã tạo động SVG không hoạt động trong Firefox, nhưng hoạt động trong Chrome

Question

Tôi đang cố gắng tìm ra lý do tại sao mã này không hoạt động trong Firefox. Đó là nghĩa vụ phải tạo ra đường dẫn ngang, nhưng tôi không thể nhìn thấy chúng trong Firefox. Chrome và IE hiển thị chúng đúng cách. Điều gì có thể là vấn đề?

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

d thông số con đường của bạn được định dạng không đúng.

Bạn có cái gì đó như

d="M 0 100, L 1000 100" 

trong khi nó phải được

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

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

Việc sửa chữa là

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

JSFiddle