Question

我有直接在浏览器（目前是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>

能够在给定的边界框内找到文本（例如＆lt; rect /＆gt;）

会很高兴

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

更新：在@Sirko的鼓励下，我在网上发现this article已经4岁了。

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

然而，这在主要浏览器之间存在很多兼容性问题！

Answer 2

您不仅可以在SVG中包含HTML，而且甚至可以在HTML中以SVG格式在HTML中包含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>

但请注意，HTML文档中对内联SVG的支持仍然是“古怪的”＃34;充其量，即使在今天（2014年3月）。例如，请在不同的浏览器中尝试此Codepen。

如何在SVG文档中显示HTML？

2 个答案: