将 HTML 嵌入 HTML 中的嵌入式 SVG？答案

【问题标题】：Embedding HTML in embedded SVG in HTML?将 HTML 嵌入 HTML 中的嵌入式 SVG？
【发布时间】：2016-06-09 15:15:08
【问题描述】：

允许在 HTML 中嵌入 SVG...

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hmmm....</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <text>Hello cruel world!</text>
        </svg>
    </body>
</html>

...反之亦然：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
    <foreignObject x="0" y="0" width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <h1>Goodbye cruel world...</h1>
        </body>
    </foreignObject>
</svg>

规范say（23.2，第三段）（我引用：）“如果您想将 SVG 嵌入 XHTML 中的 SVG 中的 XHTML 中的 SVG，没关系……”。我想哇，这太深奥了！然后这样做了：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Yeah!</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <foreignObject x="0" y="0" width="100%" height="100%">
                <body class="svgbody" xmlns="http://www.w3.org/1999/xhtml">
                    <h1>And hello again!</h1>
                </body>
            </foreignObject>
        </svg>
    </body>
</html>

但所有浏览器都将body标签与HTML5 body标签合并（HTML5 body标签获取svgbody类）...这是fiddle（fullscreen）；内联 svg 中没有 body 标签。

我不知道为什么，希望你能帮助我！可以通过将 SVG 放在不同的文件中来解决它，但我不想听到它。为什么它不起作用？

【问题讨论】：

标签： html xhtml svg embedding

【解决方案1】：

要记住的一点是，SVG 文档是在 XML 文档中讨论 SVG 中的 XHTML。您使用的不是 XML，而是 HTML。它是 HTML 解析器的一项功能，可以按照您看到的方式合并正文标签。

如果您使用的是 XML 解析器，则不会发生这种合并。为此，您需要使用 application/xhtml+xml 内容类型提供文档。如果您这样做了，那么您需要解决其他问题，例如将 xmlns="http://www.w3.org/1999/xhtml" 属性添加到您的 html 元素。

听从 robertc 的建议要容易得多。

【讨论】：

是的，我做了一些进一步的阅读，我发现 XML 命名空间没有做任何事情。但是将 div 标签直接放入 foreignObject 是否有效？这将解决一切......
<div> 作为<foreignObject> 的直接子级很好。不过，验证器似乎对 <foreignObject> 作为 <svg> 的直接子代不满意。你可能需要调整它。
"它是 HTML 解析器的一项功能，可以按照您看到的方式合并正文标签。"嗯，这很有趣。
@JAB - 如果你想要血腥的细节，他们在这里：dev.w3.org/html5/spec/…。向下搜索A start tag whose tag name is "body"，然后搜索该部分的最后一段。 FWIW，html标签的处理方式类似。
嗯，以这种方式使用html 标签不会导致frameset-ok 标志被设置为“not ok”，但body 标签会这样做，这似乎有点奇怪。 frameset-ok 标志是做什么用的？那里的描述不是很有用。

【解决方案2】：

你需要body元素来做一些特别的事情吗？为什么不用非特权元素包装您的内容：

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%">
        <foreignObject x="0" y="0" width="100%" height="100%">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div class="svgbody">
                    <h1>This sucks less</h1>
                </div>
            </body>
        </foreignObject>
    </svg>
</body>

【讨论】：

或者甚至完全省略foreignObject中的body标签。他们没有做任何有用的事情。

【解决方案3】：

如果您希望 html5 解析器忽略 svg 和其中的所有内容 () 您可以将 svg 放入评论中；让 svg 解析器忽略 html-note 使用 cdata：

<html><body><svg>
<![CDATA[  <!--  ]]>
    <ForeingObject />
<![CDATA[   -->  ]]>
</svg></body></html>

http://www.w3schools.com/xml/xml_cdata.asp

试试这样的...

【讨论】：

【解决方案4】：

在HTML in SVG in HTML 中，我找到了以下示例代码。对我来说效果很好。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML in SVG in HTML</title>
  <style type='text/css'>
    svg { border: 1px solid black; }
    svg div { border: 1px dotted blue; }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>The quick brown fox jumps over the lazy dog. Pack my box with
         five dozen liquor jugs</div>
    </body>
  </foreignObject>
</svg>
</body>
</html>

不过，请注意，即使在今天（2014 年 3 月），HTML 文档中对内联 SVG 的支持充其量仍然是“古怪的”。

【讨论】：

Codepen 链接失效。
@JeremyBanks：感谢您指出这一点。由于链接已经有 2 年历史了，我刚刚删除了它...