web-dev-qa-db-ja.com

IE11メタ要素がSVGを破壊する

SVGファイルデータをHTMLに直接埋め込みました。 ChromeおよびFirefoxで表示されますが、IE11ではまったく表示されません。 SVGへのPastebinリンクは http://Pastebin.com/eZpLXFfD です

META TAGを追加しようとしましたが、役に立ちませんでした。最初はIE互換ビューの問題であると考えましたが、その機能の切り替えも機能しませんでした。

<meta http-equiv="X-UA-Compatible" content="IE=8">

何か助け？この質問に答えるために他に提供できる情報

internet-explorersvginternet-explorer-11
32
Rahil Pirani

まるであなたが最新のドキュメントモードになっていないかのように聞こえます。 Internet Explorer 11では、標準モードの場合にSVGが正常に表示されます。 x-ua-compatibleメタタグがある場合は、以前のモードではなく、Edgeに設定してください。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

ドキュメントモードを確認するには、F12 Developer Toolsを開き、ドキュメントモードのドロップダウン（右上に表示され、現在「エッジ」）またはエミュレーションタブのいずれかを確認します。

enter image description here

x-ua-compatibleメタタグ（またはヘッダー）がない場合は、<!DOCTYPE html>など、ドキュメントを標準モードにするdoctypeを必ず使用してください。

enter image description here

26
Sampson

私が使用していた4つのインラインSVGのうち3つで同じ問題が発生していましたが、IE11では（1つのケースでは部分的に）消えていました。

ページに<meta http-equiv="x-ua-compatible" content="ie=Edge">がありました。

結局、問題はsvgファイルの余分なクリッピングパスでした。 Illustratorでファイルを開き、クリッピングパス（通常はレイヤーの下部）を削除しましたが、すべて正常に機能するようになりました。

10
rafaelbiten

無駄に他の提案を試みた後、私はこの問題が私にとってスタイリングに関連していることを発見しました。理由についてはあまり知りませんが、SVGはDOMでの位置を保持していないため、SVGが表示されないことがわかりました。

本質的に、私のSVGの周りのコンテナはwidth：0およびoverflow：hiddenにありました。

コンテナの幅を設定することでこれを修正しましたが、その特定の問題により直接的な解決策がある可能性があります。

2
Matt Grosso

この問題にぶつかり、SVGで使用していた幅のスタイルを削除することで解決しました。

.svg-div img {
    width: 200px; /* removed this */
    height: auto;
}
1
lukemcd

私はそれを考え出した！ IE8モードを使用してページがレンダリングされていました...

<meta http-equiv="X-UA-Compatible" content="IE=8">

ヘッダーで...に変更しました

<meta http-equiv="X-UA-Compatible" content="IE=9">

9そしてそれは働いた！

1
Rahil Pirani

各要素にスタイル属性が重複しています。

style="opacity:0.8"

このエラーのために、これは確かにFirefoxでは表示されません。 Chromeで表示される場合は、Chromeバグを発生させるのが最適です。

0
Robert Longson