动态创建的 SVG 在 Firefox 中不起作用，但在 Chrome 中起作用答案

【问题标题】：Dynamically created SVG not working in Firefox, but works in Chrome动态创建的 SVG 在 Firefox 中不起作用，但在 Chrome 中起作用
【发布时间】：2015-05-28 15:22:05
【问题描述】：

我试图弄清楚为什么这段代码在 Firefox 中不起作用。它应该创建水平路径，但我在 Firefox 中看不到它们。 Chrome 和 IE 正确显示它们。可能是什么问题？

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

【问题讨论】：

似乎是 svgBottomWall.clientWidth 在你的小提琴中返回 0 在 Firefox 中。我尝试在循环中使用固定值，但它仍然不起作用，所以这只是你的问题之一。

标签： javascript html google-chrome firefox svg

【解决方案1】：

您的d 路径参数格式不正确。

你有类似的东西

d="M 0 100, L 1000 100"

应该是这样的

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

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

解决办法是

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

JSFiddle

【讨论】：