如何在SVG文档中显示HTML？

Question

如何在SVG文档中显示HTML？

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

Run Code Online (Sandbox Code Playgroud)

能够在给定的边界框内找到文本(例如<rect />)会很高兴

请注意,目前我不想在HTML文档中嵌入SVG,也不需要递归(例如HTML中没有SVG).

更新:@Sirko鼓励我在网上发现这篇文章已经4年了.

Answer 1

Sir*_*rko 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>

Run Code Online (Sandbox Code Playgroud)

但是,这在主流浏览器之间存在相当多的兼容性问题!

归档时间：	13 年，2 月前
查看次数：	2261 次
最近记录：	11 年，5 月前