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

Question

我已经看过几个关于如何使用DOM api从Javascript中创建SVG片段的例子，但我很好奇有什么我可以用来从类似于innerHTML的字符串创建一个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);

问题是带有SVG的createContextualFragment（）在Chrome中出现异常。 那么有一种跨浏览器的方式吗？

Answer 1

所以这就是我所做的：

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不支持foreignObject之类的东西。 SVG非常接近于构建不具备所有HTML头痛的应用程序的绝佳解决方案。

Answer 2

如果你想要innerHTML这样的东西，原始代码应该有范围选择元素，以设置正确的解析器上下文。 然后Chrome应该修复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

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2011-01-04 22:07:27

解决方案2
1 2011-12-19 06:19:18

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-01-04 22:07:27

解决方案2 1 2011-12-19 06:19:18

解决方案1
3 已采纳 2011-01-04 22:07:27

解决方案2
1 2011-12-19 06:19:18