如何在SVG文档中显示HTML？ [英] How can I display HTML within an SVG document?
问题描述
我有直接在浏览器（当前IE和Firefox）中显示的SVG文档 - 通过直接将* .svg加载到浏览器中。这些文件包含我想要显示为HTML的文本，例如使用自动换行，下标和可能滚动的方式在HTML窗口/面板中进行渲染。 SVG和HTML格式正确，并在正确的命名空间下进行管理。
一种典型的元素（没有样式）可能是：
< svg xmlns =http://www.w3.org/2000/svg>
< g>
< rect x =100y =200width =300height =400/>
非常长的段落，这将需要换行和滚动
< / h：p>
< / g>
< / svg>
能够定位给定边界框内的文本会很好（例如< rect />）
请注意，目前我不想将SVG嵌入到HTML文档中，并且不需要递归（例如，在HTML中没有SVG） 。
更新：
受@Sirko鼓励我发现这篇文章在网络上已经有4年的历史了。
一般而言，< foreignObject> 应用于在SVG中包含不同的标记（参见 MDN文档）。在你的情况下，这个其他标记将是XHTML。
< svg xmlns =http://www.w3.org/ 2000 / SVG>
< g>
<！ - XHTML内容在这里 - >
< body xmlns =http://www.w3.org/1999/xhtml>
< p>
这是一个< i>斜体< / i>和< sub>下标< / sub>在...
非常长的段落，这将需要包装和滚动
< / p>
< / body>
< / foreignObject>
< / g>
< / svg>
然而，这在主要浏览器之间存在一些兼容性问题！
I have SVG documents which I display directly in browsers (currently IE and Firefox) - by loading the *.svg directly into the browser. These documents contain text which I would like to display as "HTML", e.g. rendered in an HTML window/panel with word-wrap, subscripts and possibly scrolling. The SVG and HTML are well formed and managed under the correct namespaces.
A typical sort of element (without styles) might be:
<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>
It would be nice to be able to locate the text within a given bounding box (e.g. the <rect/>)
Note that at present I do not want to embed SVG within an HTML document and there is no need for recursion (e.g. no SVG within the HTML).
UPDATE: Encouraged by @Sirko I found this article on the web it's 4 years old.
In general the <foreignObject> shall be used for including different markups inside of SVG (see MDN docu on this). In your case this other markup would be 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>
This, however, has quite some compatibility problems between the major browsers!
这篇关于如何在SVG文档中显示HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
