如何在 SVG 文档中显示 HTML？答案

【问题标题】：How can I display HTML within an SVG document?如何在 SVG 文档中显示 HTML？
【发布时间】：2023-03-03 04:47:02
【问题描述】：

我有 SVG 文档，可以直接在浏览器（目前是 IE 和 Firefox）中显示 - 通过将 *.svg 直接加载到浏览器中。这些文档包含我想显示为“HTML”的文本，例如在带有自动换行、下标和可能滚动的 HTML 窗口/面板中呈现。 SVG 和 HTML 格式正确，并在正确的命名空间下进行管理。

一种典型的元素（没有样式）可能是：

<svg  xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="100" y="200" width="300" height="400"/>
    <h:p xmlns:h="http://www.w3.org/1999/xhtml">
This is an <h:i>italic</h:i> and a <h:sub>subscript</h:sub> in a ...
very long ... paragraph which will need word wrapping and maybe scrolling
    </h:p>
  </g>
</svg>

如果能够在给定的边界框（例如）内找到文本，那就太好了

请注意，目前我不想在 HTML 文档中嵌入 SVG，也不需要递归（例如 HTML 中没有 SVG）。

更新：在@Sirko 的鼓励下，我在网上找到了this article，它已经有 4 年历史了。

【问题讨论】：

我认为如果你想让 HTML 在 IE 中工作（并且在浏览器中保持一致），你必须采用内联 SVG 路线。
@Erik 你的意思是 HTML 包含 SVG 包含 HTML？还是 HTML 包含 SVG 包含 refToParentHTML？如果你有例子吗？如果你这样做，请添加为答案，我会 +1
问题中的示例代码 sn-p 看起来可以仅使用 HTML+CSS 或带有 svg 背景图像或一些内联 svg 的 HTML 来完成。你能解释一下为什么你不想那样做吗？

标签： html svg

【解决方案1】：

一般来说，<foreignObject> 应用于在 SVG 中包含不同的标记（参见MDN docu）。在您的情况下，这个其他标记将是 XHTML。

<svg  xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="100" y="200" width="300" height="400" style="fill: none; stroke: black; stroke-width: 1px;"/>
    <foreignObject x="100" y="200" width="300" height="400">  
      <!-- XHTML content goes here -->  
      <body xmlns="http://www.w3.org/1999/xhtml">  
        <p>
            This is an <i>italic</i> and a <sub>subscript</sub> in a ...
            very long ... paragraph which will need word wrapping and maybe scrolling
        </p>
      </body>  
    </foreignObject>  

  </g>
</svg>

但是，这在主流浏览器之间存在相当大的兼容性问题！

【讨论】：

什么样的兼容性问题？
@Alohci 实际上，上面的代码对我来说似乎只在 FireFox 和 Chrome 中呈现。 Opera 和 IE9 不显示任何文本，但也没有错误...
+1 @Sirko 这正是我想要的。有问题我也不意外。我等一下看看其他人有没有想法和经验
@Sirko 在 Firefox 中为我工作，但在 IE 中没有（正如您所指出的）。 Firefox 似乎无需滚动即可剪辑 - 但这可能是可以管理的，因为我知道字符数及其屏幕位置

【解决方案2】：

您不仅可以在 SVG 中包含 HTML，而且您甚至可以在 SVG 中包含 HTML 到 HTML 中的 HTML 中 SVG 中的 HTML ...

这是来自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。

【讨论】：