使用JavaScript和字符串创建SVG片段

StackOverflow https://stackoverflow.com/questions/4510515

  •  12-10-2019
  •  | 
  •  

题

我已经看到了几个有关如何使用DOM API从JavaScript中创建SVG片段的示例，但是我很好奇我可以使用类似于InterHTML的字符串创建SVG片段。我尝试了以下内容：

var svg = '<foreignObject><body xmlns="http://www.w3.org/1999/xhtml"><p>Hello World</p></foreignObject>'
var range = document.createRange();
return range.createContextualFragment(svg);

问题是createContextualFragment（），SVG爆炸，Chrome中的例外。那么是否有交叉浏览器的方法可以做到这一点？

有帮助吗？

解决方案

所以这是我所做的：

parseXML('<foreignObject xmlns="http://www.w3.org/2000/svg"><body xmlns="http://www.w3.org/1999/xhtml"><p id="seriesTitle"></p><p id="seriesValue"></p><p style="margin:0;text-align:center;" id="seriesDate"></p></body></foreignObject>')

由于parsexml（）并不完全支持交叉浏览器，因此我在顶部具有此代码：

if (typeof parseXML=='undefined') {
    window.parseXML = function (s,doc) {
        doc = doc || document;
        var doc2=(new DOMParser()).parseFromString(s, "text/xml");
        return doc.adoptNode(doc2.documentElement);
    }
}

然后，我可以使用jQuery查询片段，并设置我想要的值：

jQuery('#seriesTitle', detailChart.mytooltip).text( point.series.name );
jQuery('#seriesValue', detailChart.mytooltip).text( point.y );
jQuery('#seriesDate', detailChart.mytooltip).text( date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() );

问题是VML不支持外国对象。 SVG非常接近成为没有所有HTML头痛的构建应用程序的绝佳解决方案。

其他提示

如果你想要类似的东西 innerHTML, ，您的原始代码应具有选择元素的范围，以设置正确的解析器上下文。然后镀铬应该修复 http://crbug.com/107982

假设该错误是固定的，这是我将如何解析SVG片段的方法。https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#l184

同时，我提出了一个与您非常相似的解决方案，但告诉 DOMParser 它正在处理SVG内容。我认为您的解决方案对您的特定情况更好，但是我的代码更接近 innerHTML （实际上我的目标是匹配 insertAdjacentHTML).

https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#l169

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top