4

jpg をラップするだけの svg の簡単な例があります。HTMLは次のとおりです。

<html>
<head>
</head>
<body>
    <div id="theimageholder">
        <img id="theimage" src="Images/simplepng.svg"></img>
    </div>
</body>
</html>

そして、ここに simplepng.svg の SVG があります。

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="410" height="340"
         viewBox="0 0 200 200"
         zoomAndPan="enable"
         preserveAspectRatio="xMidYMin meet" >
<image x="0" y="0" width="200px" height="200px" xlink:href="earth.jpg"/>
</svg>

これは IE9 では機能しますが、Chrome や Firefox では機能しません。どちらも何も表示されません。xlink:href はこれらのブラウザーで動作しますか?

4

1 に答える 1

4

SVG ファイルは 100% 正しいように見えます: http://apike.ca/prog_svg_images.html

イメージ タグを埋め込みまたはオブジェクト タグに切り替えると、次のように機能します。

<embed src="Images/test.svg" type="image/svg+xml" width="410" height="340" />
<object data="Images/test.svg" type="image/svg+xml" width="410" height="340" />

おそらく、これらのブラウザの制限にすぎません。Safariでも問題があることを確認しました。これに関するリファレンスやバグ番号が見つかりませんでした。

于 2012-12-03T22:13:15.277 に答える