HTML 中的 SVG 中的 HTML答案

【问题标题】：HTML in SVG in HTMLHTML 中的 SVG 中的 HTML
【发布时间】：2011-11-19 11:43:12
【问题描述】：

我有一个简单的 SVG 文件，它在 Firefox 中可以很好地查看 - 它的一些包装文本在一个框中使用 foreignObject 包含一些 HTML - 文本被包装在 div 中：

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

但是再多的花言巧语也不能使它作为 HTML 文档中包含的

要么这根本不可能，要么我在命名空间或其他东西上犯了一些错误。但是任何人都可以将上述 SVG 包装在 HTML 文档中，并让它在给定位置（当然相对于 SVG 或其容器）的给定宽度 x 高度的框中显示文本？

我没有在 HTML 中看到 SVG 中的 HTML 示例，这让我觉得我很愚蠢或不可能 - 互联网上的示例似乎只是如何将 HTML 嵌入到 SVG 中，如上所述。我要深入了。

【问题讨论】：

我不明白。这是不是：alohci.net/text/html/html-in-svg-in-html.htm.ashx 不做你想做的事？我错过了什么？
请澄清：您是要在 HTML 或 XHTML 中嵌入 SVG？

标签： html svg

【解决方案1】：

This works fine 我：

<!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>

【讨论】：

太棒了——这表明它可以在实践中完成，而且我并没有完全找错树。我怀疑我的 html 测试没有文档类型，或者在错误的地方有错误的命名空间或其他东西。我记得你从来不用担心这些事情（但那是 1995 年）。
更新：实际上这在我的 Ubuntu 机器上的 Firefox 3.6.17 上不起作用，但在 Windows 上的 FF 6.0.2 和 Chrome 12.0.x 上起作用。 #updateverythingtime
@Spacedman 这是因为在 Firefox 4 切换到 HTML5 解析器时才添加对 HTML 中的 SVG 的支持，而不是对 XHTML 中的 SVG 的支持。如果您想支持旧版浏览器，则必须将文档作为 application/xhtml+xml 而不是 text/html 提供（将文件扩展名更改为 .xhtml 适用于本地文件）。
@Spacedman Here's the browser support matrix
非常有用，谢谢。现在要弄清楚为什么我构建的想要使用它的整个结构在最新版本上失败了:) 以后可能会有更多问题！