1

* .svgをブラウザに直接ロードすることにより、ブラウザ（現在はIEとFirefox）に直接表示する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>

特定のバウンディングボックス（<rect />など）内でテキストを検索できると便利です。

現在、HTMLドキュメント内にSVGを埋め込みたくないので、再帰する必要はありません（たとえば、HTML内にSVGはありません）。

更新：@Sirkoに励まされて私はこの記事をウェブ上で見つけました。それは4年前のものです。

4

2 に答える 2

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>

ただし、これには主要なブラウザ間の互換性の問題がかなりあります。

于 2012-06-28T11:43:59.313 に答える
1

HTMLをSVGに含めることができるだけでなく、HTMLをSVGに含めることもできます。HTMLをSVGに含めることもできます...

HTMLのSVGの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のサポートは、今日（2014年3月）でも、せいぜい「風変わり」なままであることに注意してください。たとえば、このCodepenをさまざまなブラウザで試してください。

于 2014-03-25T09:47:09.377 に答える