web-dev-qa-db-ja.com

SVG画像タグの画像はChromeに表示されませんが、ローカルに表示されますか？

何らかの理由で、ChromeはImageタグに画像なしでSVGを表示しています。

これが私のSVGのサンプルです。

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.pngはローカルファイルですが、私はimgurにアップロードしようとしましたが、それも機能しませんでした。

Svgタグは次のとおりです。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

ローカルでの表示は次のとおりです。

http://i.imgur.com/BDP8KpG.png

ライブWebページでの表示は次のとおりです。

http://i.imgur.com/KVuxLI1.png

ご覧のとおり、2人のプレーヤーが欠落しています。これは、SVGをオンラインでアップロードするときは発生しませんが、そのURLをページにリンクしようとすると、同じことが起こります

関連するかどうかはわかりませんが、ページのHTMLコードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>
htmlcsssvgweb
15
sgruggy

PaulLeBeauの答えは正しい。しかし、別の解決策は、画像にembedタグの代わりにimgタグを使用することです。

<embed src="svg.svg">

ここ は、svg画像をHTMLに埋め込むためのいくつかの方法です。

30
nisekgao

<img>要素を使用してSVGをWebページにロードする場合、SVGは自己完結型である必要があります。 PNGファイルにリンクすることで行うように、サードパートリソースにリンクすることはできません。これはブラウザによって課されるプライバシー制限です。

可能な解決策は次のとおりです。

  1. PNGをデータURI形式に変換し、そのようにしてSVGに含めます。

  2. ブロッカーPNGを、<path>などの実際のSVG要素に変換します。

12
Paul LeBeau