javascript - svg-insertAdjacentHTML 不适用于 firefox 35 及以下版本？

Question

我正在尝试使用 svg 绘制一条线。所以我使用了 insertAdjacentHTML。但这适用于 chrome 但不适用于 firefox。

我的html代码如下

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; ">
    <svg id='svg_main' height="330" width="1100"></svg>
</div>

我的javascript如下

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)"  stroke="#707073" fill="none"  storke-width="1px" opacity="1" ></path>';
svgid.insertAdjacentHTML('beforeend',data);

它不在 firefox(35 以下)上的本地主机上运行。

例如，

我打开 firefox 并输入 url (localhost/svgtest.html) 现在 svg 行没有显示。但是，我通过 ctrl+s 保存页面并通过 firefox 打开它显示了该行。

请帮助我解决这个问题并阐明问题的原因。

Answer 1

您的代码在 Firefox 中运行良好。除了您有错字 (storke-width)。

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)"  stroke="#707073" fill="none"  stroke-width="1px" opacity="1" ></path>';
svgid.insertAdjacentHTML('beforeend',data);

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; ">
    <svg id='svg_main' height="330" width="1100"></svg>
</div>