我可以将HTML嵌入HTML5 SVG片段吗？ [英] Can I embed HTML into an HTML5 SVG fragment?

问题描述

HTML5支持< svg> 标签，允许将SVG嵌入到HTML中。

更深入，我可以在我的< svg> 片段中嵌入一些HTML吗？例如，我想在我的SVG图形的某个部分放置CSS'ed < table> 。

我做了一个小测试，Chrome12不喜欢< s>>< / $ c $内的HTML < p> C>。
是否有一些技术可以使其工作（例如可能是一个html容器标签？）？


解决方案

是的，使用< foreignObject> 元素，请参阅这个问题的一些例子。

另外，如果你有一个html5文档，你也可以使用CSS定位和z-index来制作html的一部分可以看到你希望在svg上面摆放的位置。如果你这样做，你不需要将html嵌入到svg片段中。根据我的经验，这将会为您提供跨浏览器最一致的行为。

HTML5 supports the <svg> tag, allowing to embed SVG into HTML.

Digging a little deeper, can I nest some HTML inside my <svg> fragment? For example, I'd like to put a CSS'ed <table> in some part of my SVG graphics.

I made a small test and Chrome12 didn't like the HTML <p> inside the <svg>. Is there some technique to make it work (such as maybe an html container tag?)?

解决方案

Yes, with the <foreignObject> element, see this question for some examples.

Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience.

这篇关于我可以将HTML嵌入HTML5 SVG片段吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！