如何在SVG文檔中顯示HTML？

我有直接在瀏覽器（當前IE和Firefox）中顯示的SVG文檔 - 通過直接將* .svg加載到瀏覽器中。這些文件包含我想要顯示爲「HTML」的文本，例如使用自動換行，下標和可能滾動的方式在HTML窗口/面板中進行渲染。 SVG和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/>）

請注意，目前我不想將SVG嵌入HTML文檔中，並且不需要遞歸（例如，HTML中沒有SVG）。

更新：鼓勵@Sirko我發現this article在網絡上它是4歲。

來源

2012-06-28 peter.murray.rust

我認爲如果你希望它在IE中工作（並且在瀏覽器中一致），你將不得不採用內聯SVG路由的HTML。 –

@Erik你的意思是HTML包含SVG包含HTML？或HTML包含SVG包含refToParentHTML？如果你有例子嗎？請添加爲答案，如果你這樣做，我會+1它 –

問題中的示例代碼片段看起來可以用HTML + CSS或帶有svg背景圖像或一些內聯svg的HTML來完成。你能解釋爲什麼你不想這樣做嗎？ –

一般而言，<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>

但是，這在主流瀏覽器之間存在一些兼容性問題！

來源

2012-06-28 11:43:59 Sirko

什麼樣的兼容性問題？ – Alohci

@Alohci其實上面的代碼似乎只在FireFox和Chrome中呈現給我。歌劇和IE9不顯示任何文字，但沒有錯誤... – Sirko

+1 @Sirko這正是我想要的東西。它並不讓我感到有些問題。我會等一下，看看別人是否有想法和經驗 –

您不僅可以包括HTML中SVG，但你甚至可以包括SVG在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>

儘管如此，請注意，即使在今天（2014年3月），對HTML文檔中的內聯SVG的支持仍然「很古怪」。例如，在不同的瀏覽器中試用這個Codepen。

來源

2014-03-25 09:47:09

如何在SVG文檔中顯示HTML？

回答

相關問題