web-dev-qa-db-ja.com

Internet Explorer 11で<img>タグのソースとしてのSVGが表示されない

SVGファイルを<img> </ code>タグのsrcとして表示しようとしています（これは caniuse.com/svg-img に従って行うことができるはずです）最近のブラウザ）。ファイルはChromeおよびFirefoxで表示されますが、Internet Explorerはxの付いた黒いボックスを表示するだけです。次に例を示します。

enter image description here

IEでファイルを直接開くと、画像は完全に表示されるため、実際のSVGファイルに問題はありません。 IEコンソールにエラーや警告はありません。最新バージョンのブラウザーを使用しています。

HTML：

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

スタイルシート：

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

Xが表示される理由として考えられるものは何ですか？

編集：SVGは大きな自動生成ファイルであり、その例は here です。それを生成するために使用されているコードは古いですが、上部のDOCTYPEと関係があるのでしょうか？変更しようとしましたが、まだ何も表示できませんでした。

編集2：私はそれを動作させている...並べ替え。 F12キーを押して「エミュレーション」タブに移動すると、何らかの理由でIEがドキュメントモード7でページを表示している、つまりIE7の互換モードを使用しているが、私は次の質問です：なぜモード7でページを表示して実行しているのですか？この動作を停止するにはどうすればよいですか？

htmlimageinternet-explorersvg
20
Matt Harris

問題が見つかりました。私はイントラネットでページを表示していましたが、理由はわかりませんが、IEのデフォルト設定は「互換表示でイントラネットサイトを表示する」です。互換表示設定でそのボックスのチェックを外すだけでした。 IE7ではSVGがまったく機能しないため、画像が表示されませんでした。

17
Matt Harris

（縮小するために）imgに「幅」のスタイルを設定すると、EdgeとChromeで機能しますが、IE11では表示されなくなります。むしろ、「max-width」と「max-height」の両方を設定すると、これら3つのブラウザーすべてで機能するようです。

14
bradw2k

これは、svgをimage/svg+xmlとしてではなく、プレーン/テキストとして送信することによっても発生します。 Apacheでは、.htaccessファイルに追加することでこれを修正できます-

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
9
Ryan

このモードをオフにするとWebサイトが機能することがありますが、.svgイメージをサポートしていないブラウザーもあります。これらのブラウザには、このボックスにチェックマークが付いていないのと同じ結果が表示されます。

SVGを<img>として使用するSVGをファイルに保存すると、<img>タグで直接使用できます。

<img src="kiwi.svg" alt="Kiwi standing on oval">

イラストレーターでは、アートボードは612px✕502pxでした。

それはまさに、ページ上での画像の大きさであり、そのままです。ただし、PNGまたはJPGの場合と同様に、imgを選択し、幅または高さを変更するだけで、サイズを変更できます。

ブラウザのサポート

この方法で使用すると、固有のブラウザーサポートの独自のセットがあります。基本的には、IE 8以下、およびAndroid 2.3以下。

SVGを使用したいが、この方法でのSVGの使用をサポートしていないこれらのブラウザーもサポートする必要がある場合は、オプションがあります。

1つの方法は、Modernizrのサポートをテストし、イメージのsrcを交換することです。

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

マークアップにJavaScriptを使用しても問題ない場合、David Bushellには本当に簡単な代替手段があります。

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

これは CSS Tricksから引き出されています。クリックして記事全体を読んでください。

5
Graeme Wilkinson