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

何らかの理由で、Chromeが画像タグなしでSVGを表示しています。ここでSVGの画像画像タグはChromeでは表示されませんが、ローカルに表示されますか？

は私の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>

出典

2016-12-17 sgruggy

変更を反映するために、 ' 'タグのパスを変更したことを確認しましたか？私。'blocker.png'を' http：// imgur.com/you/ABCDEF'に変更するか、リンクが他のものであれば – Jhecht

@Jhechtはい、私は確信しました。私はそれをローカルにロードした、それが現れた。私のウェブページにロードされて、それはしませんでした。 – sgruggy

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

<embed src="svg.svg">

は、svgイメージをHTMLに埋め込むいくつかの方法です。

出典

2016-12-17 06:15:24 nisekgao

うわー、greatttt！ありがとうございました：） – kabrice

<img>要素を使用してSVGをWebページに読み込む場合、SVGは自己完結型でなければなりません。 PNGファイルにリンクしているような3番目のリソースにリンクすることはできません。これは、ブラウザによって課されるプライバシーの制限です。

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

は、データURIの形式にPNGを変換し、あなたのSVG方法でそれらを含めます。
ブロッカーPNGを実際のSVG要素（<path>など）に変換します。

出典

2016-12-17 05:49:31

なぜローカルで動作するのでしょうか？ – sgruggy

それが本当であれば、それをオンライン画像ホスティングウェブサイトにアップロードしても、それはうまくいかないでしょう。 – sgruggy

あなたが ''でロードしていないので、あなたのブラウザ（すなわち '.svg'ファイル）内のSVGを見ることは上手です。あなたの画像ホスティングサイトが '.svg'ファイルをホストし、' 'を介してそれを埋め込むのではなく直接提供する場合も同様です。 –

-1

私は、画像ファイルがhtmlのルートディレクトリにない場合、Chrome [v 58.0.3029.81（64-bit）]がsvg内に画像を表示していないことが判明しました。 .svgファイルと埋め込み.pngファイルは/ images -folderに配置されていましたが、.svgコンテンツはChromeの右側に表示されますが、埋め込まれた.pngは表示されませんでした。 .pngがhtmlルートにコピーされると（../）、Chromeが動作します。

しかし、.svgと.pngが同じ/ imagesフォルダにある場合、Firefox [v 52.0.2（32-bit）]は正常に動作しているようです。

編集：私の場合、実際には、実際のsvg要素にjsハンドルを取得するためのd3.xml（..）メソッドを使用してsvgをロードします。

出典

2017-04-20 17:42:54 mpeli

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

答えて

関連する問題