1

最近、SVG で html を扱い始めました。コードは FireFox では正常に動作しますが、Chrome では div コンテンツが表示されません。

この問題を整理するのを手伝ってくれませんか。これは、div コンテンツを「MY DIV」および空港記号として表示するサンプル コードです。

コードは my_div.svg として保存されます

前もって感謝します。

        <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"   viewport-fill="red">
        <defs>  
            <!-- My div -->
            <symbol id="my_div" viewBox="0 0 50 50" >
                <foreignObject x="0" y="0" width="50" height="50" fill="red">
                    <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50">
                        <div>MY DIV</div>
                    </body>
                </foreignObject>
            </symbol>

            <!-- Airport Symbol -->
            <symbol id="airport" viewBox="0 0 10 10">
                <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/>
            </symbol>

        </defs>

      <g fill="red"  transform="scale(18)"  >

          <g transform="translate(0, 0)">
            <use xlink:href="#my_div" width="5" height="5"/>
          </g>

          <g id="demo" transform="translate(0, 0)">
          <use xlink:href="#airport" x="10" y="0" width="5" height="5"/>
        </g>

     </g>
    </svg>
4

3 に答える 3

1

SVG 仕様では、要素<foreignObject>でコンテンツを直接再利用することは許可されていません。子を含むコンテンツを<use>許可するかどうかの実装は、ブラウザーによって異なります。仕様で明示的に禁止されているわけではありませんが、意図を多少回避しています。<use><foreignObject>

Firefox の実装は、<use>基本的にすべての DOM 要素の隠れたクローンであるため、どのような種類のコンテンツのクローンでも問題はありません。ただし、他のブラウザは、ソースとコピー グラフィックスをより強力にリンクし、foreignObjects のコピー メカニズムを備えていません。

于 2015-01-07T16:12:56.867 に答える
0

ここに入力したコードを SVG として保存したところ、次のように受け取りました。

このページには次のエラーが含まれています:

行 1 の列 6 のエラー: XML 宣言はドキュメントの先頭でのみ許可されます 以下は、最初のエラーまでのページのレンダリングです。

あなたが提供したコードの最初の行を削除するだけで修正しました。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"   viewport-fill="red">
        <defs>  
            <!-- My div -->
            <symbol id="my_div" viewBox="0 0 50 50" >
                <foreignObject x="0" y="0" width="50" height="50" fill="red">
                    <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50">
                        <div>MY DIV</div>
                    </body>
                </foreignObject>
            </symbol>

            <!-- Airport Symbol -->
            <symbol id="airport" viewBox="0 0 10 10">
                <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/>
            </symbol>

        </defs>

      <g fill="red"  transform="scale(18)"  >

          <g transform="translate(0, 0)">
            <use xlink:href="#my_div" width="5" height="5"/>
          </g>

          <g id="demo" transform="translate(0, 0)">
          <use xlink:href="#airport" x="10" y="0" width="5" height="5"/>
        </g>

     </g>
    </svg>

これは私にとってChromeで機能しました（mac）

于 2012-10-02T17:01:15.007 に答える