我可以将 HTML 嵌入到 HTML5 SVG 片段中吗？答案

【问题标题】：Can I embed HTML into an HTML5 SVG fragment?我可以将 HTML 嵌入到 HTML5 SVG 片段中吗？
【发布时间】：2011-09-26 04:54:50
【问题描述】：

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

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

我做了一个小测试，Chrome12 不喜欢 <svg> 中的 HTML <p>。是否有一些技术可以让它工作（比如可能是一个 html 容器标签？）？

【问题讨论】：

标签： html svg

【解决方案1】：

是的，使用<foreignObject> 元素，请参阅this question 了解一些示例。

或者，如果您有一个 html5 文档，您还可以使用 CSS 定位和 z-index 使部分 html 可见，您希望在 svg 顶部布局。如果您这样做，则不需要将 html 嵌套在 svg 片段中。根据我的经验，这将为您提供跨浏览器最一致的行为。

【讨论】：

谢谢埃里克！ This article gives examples。 FWIW，Chrome 似乎有问题（<foreignobject>tag 之后的任何内容都被忽略了。FF5 似乎做得很好。
对于其他人：我的错误是没有给 foreignObject 一个宽度和高度。
@Erik Dahlström，你有没有关于如何在不嵌套的情况下将 html 放入 svg 的示例？

【解决方案2】：

Internet Explorer 不支持外来对象。请查看ForeignObject

【讨论】：

【解决方案3】：

复制自bl.ocks.org（谢谢Janu Verma）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML inside SVG</title>
    <style type="text/css"></style></head>
    <body>
        <div>I'm a div inside the HTML</div>
        <svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
            <foreignobject class="node" x="46" y="22" width="100" height="100">
                <div style="border:1px green solid">I'm a div inside a SVG.</div>                
            </foreignobject>
            <circle cx="100" cy="160" r="50" fill="blue"></circle>
        </svg>
        <div>Interesting! But you a Foreign Object.</div>
    </body>
</html>

更新

请注意，上面有一个“骆驼错误” - 它应该是 foreignObject（大写 O），而不是 foreignobject。拼写错误是否在“直接”HTML/SVG 中并不重要。但是如果你使用 JavaScript (.createElementNS)，那么如果没有适当的驼峰式大小写（2020 年 4 月），它将无法工作

【讨论】：