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

发布于 2024-10-08 12:22:05 字数 434 浏览 4 评论 0原文

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

原文

I've seen several examples about how to use the DOM api to create SVG fragments from within Javascript, but I'm curious is there something I can use to create a SVG fragment from a string similar to innerHTML. I've tried this following:

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

Problem is createContextualFragment() with SVG blows up with an exception in Chrome. So is there a cross browser way to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坦然微笑 2024-10-15 12:22:05

所以这就是我所做的：

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 问题。

So here is what I did:

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>')

Since parseXml() isn't exactly cross browser supported I have this code at the top:

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);
    }
}

Then I can use jQuery to query instead the fragment and set the values I'd like:

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() );

Problem is VML doesn't support anything like foreignObject. SVG is so close to being a great solution for building applications that doesn't have all the HTML headaches.

回复收藏 0 原文