1

我已经看过几个关于如何使用 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 中出现异常。那么有没有跨浏览器的方式来做到这一点？

4

2 回答 2

3

所以这就是我所做的：

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 问题的应用程序的绝佳解决方案。

于 2011-01-04T22:07:27.533 回答
1

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

假设错误已修复，以下是我解析 SVG 片段的方法。 https://github.com/pwnall/ddr/blob/master/javascripts/base/pwnvg.coffee#L184

同时，我提出了一个与您的解决方案非常相似的解决方案，但DOMParser表明它正在处理 SVG 内容。我认为您的解决方案更适合您的具体情况，但我的代码更接近innerHTML（实际上我的目标是 match insertAdjacentHTML）。

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

于 2011-12-19T06:19:18.700 回答