1

我有直接在浏览器（目前是 IE 和 Firefox）中显示的 SVG 文档 - 通过将 *.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>

如果能够在给定的边界框（例如 <rect/>）内定位文本，那就太好了

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

更新：在@Sirko 的鼓励下，我在网上发现这篇文章已有4 年历史。

4

2 回答 2

6

通常，<foreignObject>应用于在 SVG 内包含不同的标记（参见MDN 文档）。在您的情况下，这个其他标记将是 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>

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

于 2012-06-28T11:43:59.313 回答
1

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

以下是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 。

于 2014-03-25T09:47:09.377 回答