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

我想通过使用svg画一条线。所以我使用了insertAdjacentHTML。但是这是在Chrome上工作，但不能在Firefox中工作。svg-insertAdjacentHTML不适用于Firefox 35及以下版本？

我的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（本地主机/ svgtest.html）现在SVG线未示出。但是，我通过ctrl + s保存页面，并通过Firefox打开它显示的行。

请帮我解决这个问题，并澄清问题的共鸣。

来源

2016-07-11 mkHun

Firefox的最新版本现在是47. Firefox 35是不安全的，因为它有已知的安全漏洞。升级之前，你后悔不这样做。 –

将来，请不要编辑您的问题，以便使现有答案无效。相反，**问一个新的问题**。 – Matt

@Matt没关系。我会改变自己 – mkHun

请替换以下

console.log('SVG\'s NS before insertion: ' + svgid.namespaceURI); 
svgid.insertAdjacentHTML('beforeend', data); 
console.log('SVG\'s NS after insertion: ' + svgid.namespaceURI); 
pathEl = document.getElementById('lineAB'); 
console.log('PATH\'s NS (after insertion): ' + pathEl.namespaceURI);

与Firefox 35或低于试试吧。这是为了查看在调用insertAdjacentHTML之前和之后SVG元素的名称空间以及PATH元素的名称空间在插入后的名称空间。

您也可以尝试this JSFiddle，其中包含上面提出的修改。

您遇到的问题与this bug report有关。此错误的修复程序落在Firefox 36上。除Firefox 36外，与SVG元素的内部HTML混淆并不会尊重元素推导的svg名称空间，插入的元素将属于xhtml名称空间。然后，作为一个HTML元素，认为PATH元素#lineAB是没有意义的，因此会从页面中消失。但是（这里是我的猜测），因为插入的PATH元素的名称空间（xhtml）没有出现在DOM中，所以在保存页面时不会保存它。因此，当打开保存的页面时，PATH元素的名称空间将被正确地推导出来（可能从SVG元素继承），导致SVG按照它应该出现的方式出现。

上面提到的错误报告的副本是this bug report，这里提供了更多信息。

我想建议在上面使用Vista和Firefox 35商业跨浏览器测试平台（我太喜欢惊险的生活）的方法和控制台日志是svg/svg/xhtml。使用Firefox 36，控制台日志为svg/svg/svg。

什么在Firefox 35适用于附加的路径，SVG是这样的：

var svgid = document.getElementById('svg_main'); 
var str_lne = 60; 
var pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
pathEl.setAttribute('id', 'lineAB'); 
pathEl.setAttribute('d', 'M 50 ' + str_lne + ' L 1050 ' + str_lne); 
pathEl.setAttribute('transform', 'translate(0.5,0.5)'); 
pathEl.style.stroke = '#707073'; 
pathEl.style.strokeWidth = '1px'; 
svgid.appendChild(pathEl);

JSFiddle here。也就是说，创建元素的明确性并且不要直接插入HTML。

现在是百万美元的问题。你为什么关心Firefox 35或更低版本？

来源

2016-07-20 17:45:48 xnakos

现在我在科学项目中工作。我正在开发生物学家的工具。我看到大多数科学家拥有旧版本的操作系统（windows xp，fedora 14 like）和老版本的浏览器（但我不认为是IE）。我无法告诉“请更新您的系统，请安装最新版本的Firefox”，因为他们没有时间。他们只想要结果。我关心所有浏览器的原因。 – mkHun

@mkHun我明白你处于一个艰难的境地，可能是因为动态。但你应该小心处理它。您可能会浪费大量时间试图与缺乏的旧浏览器兼容。如果你正在为公众开发一些商业广告，这可能是有道理的。但是对于那些有针对性的东西，我相信要求最低版本的浏览器是非常自然的（如果您想自由编码SVG，那么您的Firefox 36就是这种情况）。或者，更好的是声明这已经在Firefox上测试过了。重大变化并不常见。无论如何，这是你的电话。 – xnakos

'appendchild'正在使用Firefox 35及以下版本。 :) – mkHun

您的代码在Firefox中工作得很好。除了你有一个错字（storke-width）。具有以下

svgid.insertAdjacentHTML('beforeend', data);

：

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>

来源

2016-07-11 13:02:25

我尝试过但没有工作。我编辑了我的问题 – mkHun

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

回答

相关问题