0

タグを使用して svg を html の画像として使用しようとすると、タグを使用して svg ファイル内で参照されている画像<image xlink:href="">が表示されません。

これにより、ブラウザ (firefox、chome、chromium、safari) の svg にビットマップがまったく表示されませんが、Internet Explorer では画像が表示されます)。

HTMLファイル

<!DOCTYPE html>
<html>
<body>
<img src="svg.svg" height="100" width="200" />
</body>
</html>

SVG ファイル

 <svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events" height="100" width="200">
    <image height="100" width="200" xlink:href="image1.jpg" />
    </svg>

ただし、まったく同じコードをhtmlファイルに直接配置すると、

<svg height="100" width="200"> 
<image height="100" width="200" xlink:href="image1.jpg" />
</svg>

できます。

または、同じ svg ファイルを参照し<object data=""> ても機能します。svg ファイル内のベクター オブジェクト (例: rect) も、 または で正常に動作し<img>ます<object>。

svg ファイルを直接ロードすると、すべてのブラウザで適切に動作します。

HTML の img タグが svg ファイルのイメージ タグ xlinks を壊すのはなぜですか?

4

1 に答える 1

0

を使用して埋め込まれた SVG は、<img>外部オブジェクト (他の画像など) を参照できません。これは、プライバシー上の理由から、ブラウザによって意図的に実装された機能です。

<object>代わりにを使用して SVG を埋め込むことができます。または、本当に を使用する必要がある場合<img>は、SVG 内の外部画像参照をデータ URI に変更します。

于 2015-03-19T04:32:50.957 に答える