8

SVG を HTML に埋め込むことは許可されています...

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hmmm....</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <text>Hello cruel world!</text>
        </svg>
    </body>
</html>

...およびその逆：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
    <foreignObject x="0" y="0" width="100%" height="100%">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <h1>Goodbye cruel world...</h1>
        </body>
    </foreignObject>
</svg>

仕様には(23.2、3 番目の段落) (および引用します:)「SVG を SVG に XHTML に SVG に埋め込みたい場合は、問題ありません...」。うわー、DEEPだ！と思いました。そしてこれをしました：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Yeah!</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500px" height="100%">
            <foreignObject x="0" y="0" width="100%" height="100%">
                <body class="svgbody" xmlns="http://www.w3.org/1999/xhtml">
                    <h1>And hello again!</h1>
                </body>
            </foreignObject>
        </svg>
    </body>
</html>

しかし、すべてのブラウザーは body タグを HTML5 body タグとマージします (HTML5 body タグは svgbody クラスを取得します)... これはフィドル( fullscreen ) です。インライン svg 内に body タグはありません。

理由がわかりません。助けていただければ幸いです。SVG を別のファイルに入れることで解決するかもしれませんが、それについては聞きたくありません。うまくいかないのはなぜですか？

4

4 に答える 4

7

覚えておくべきことの1つは、SVGドキュメントがXMLドキュメントのSVGでXHTMLについて説明していることです。XMLではなくHTMLを使用しています。これは、表示されている方法でbodyタグをマージするHTMLパーサーの機能です。

XMLパーサーを使用している場合、そのマージは発生しません。application/xhtml+xmlこれを実現するには、コンテンツタイプでドキュメントを提供する必要があります。その場合は、要素xmlns="http://www.w3.org/1999/xhtml"に属性を追加するなど、他の問題を修正する必要がありますhtml。

robertcのアドバイスに従う方がはるかに簡単です。

于 2012-06-07T18:36:24.227 に答える
3

特に何かのためにボディ要素が必要ですか？コンテンツを非特権要素でラップしないのはなぜですか。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="100%" height="100%">
        <foreignObject x="0" y="0" width="100%" height="100%">
            <body xmlns="http://www.w3.org/1999/xhtml">
                <div class="svgbody">
                    <h1>This sucks less</h1>
                </div>
            </body>
        </foreignObject>
    </svg>
</body>
于 2012-06-07T17:36:32.980 に答える
1

html5 パーサーに svg とその中のすべてを無視させたい場合は ()、svg をコメントに入れるだけです。svg パーサーが html-note を無視するようにするには、cdata を使用します。

<html><body><svg>
<![CDATA[  <!--  ]]>
    <ForeingObject />
<![CDATA[   -->  ]]>
</svg></body></html>

http://www.w3schools.com/xml/xml_cdata.asp

このようなことを試してください...

于 2012-12-27T12:41:44.290 に答える
0

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>

それでも、HTML ドキュメントでのインライン SVG のサポートは、今日 (2014 年 3 月) でさえ、せいぜい「風変わり」なままであることに注意してください。

于 2014-03-25T09:49:24.703 に答える