小编JSD*_*ler的帖子

动态创建的SVG无法在Firefox中运行,但可在Chrome中运行

我试图弄清楚为什么这段代码在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>
Run Code Online (Sandbox Code Playgroud)

$(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);
}
});
Run Code Online (Sandbox Code Playgroud)

html javascript firefox svg google-chrome

5
推荐指数
1
解决办法
594
查看次数

标签 统计

firefox ×1

google-chrome ×1

html ×1

javascript ×1

svg ×1