如何在SVG文档中显示HTML？

本文介绍了如何在SVG文档中显示HTML？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

 < svg xmlns =http://www.w3.org/2000/svg> 
< g> 
< rect x =100y =200width =300height =400/> 
 这是< h：i>斜体< / h：i>和< h：sub>下标< / h：sub>在... 
非常长的段落，这将需要换行和滚动
< / h：p> 
< / g> 
< / svg>

能够定位给定边界框内的文本会很好（例如< rect />）

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

更新：
受@Sirko鼓励我发现在网络上已经有4年的历史了。

解决方案

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

 < svg xmlns =http://www.w3.org/ 2000 / SVG> 
< g> 
 < foreignObject x =100y =200width =300height =400> 
 < 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">  <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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！