web-dev-qa-db-fra.com

IE11, méta-élément, casse SVG

J'ai incorporé des données de fichiers SVG directement dans mon HTML. Il apparaît dans Chrome et Firefox, mais pas dans IE11. Le lien Pastebin vers le SVG est http://Pastebin.com/eZpLXFfD

J'ai essayé d'ajouter un META TAG mais en vain. Au début, je pensais que cela pourrait être un problème d'affichage IE Compatibility, mais le basculement de cette fonctionnalité n'a pas fonctionné non plus.

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

De l'aide? Quelles autres informations puis-je fournir pour aider à répondre à cette question

internet-explorersvginternet-explorer-11
32
Rahil Pirani

On dirait que vous n'êtes pas dans un mode de document moderne. Internet Explorer 11 montre que le SVG est correct lorsque vous êtes en mode standard. Assurez-vous que si vous avez un x-ua-compatible méta-tag, vous l’avez définie sur Edge plutôt que sur un mode antérieur.

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

Vous pouvez déterminer votre mode de document en ouvrant vos outils de développement F12 et en sélectionnant le menu déroulant Mode de document (visible en haut à droite, actuellement "Edge") ou l'onglet Emulation:

enter image description here

Si vous n'avez pas de x-ua-compatible méta tag (ou en-tête), veillez à utiliser un doctype qui mettra le document en mode Standards, tel que <!DOCTYPE html>.

enter image description here

26
Sampson

J'avais le même problème avec 3 des 4 svgs en ligne que j'utilisais, et ils ont seulement disparu (dans un cas, partiellement) sur IE11.

J'ai eu <meta http-equiv="x-ua-compatible" content="ie=Edge"> sur la page.

En fin de compte, le problème résidait dans des chemins de découpage supplémentaires sur le fichier svg. J'ai ouvert les fichiers sur Illustrator, supprimé le tracé de détourage (normalement au bas des calques) et maintenant ils fonctionnent tous.

10
rafaelbiten

Après avoir essayé les autres suggestions en vain, j'ai découvert que ce problème était lié au style pour moi. Je ne connais pas beaucoup le pourquoi, mais j'ai découvert que mes SVG n'étaient pas visibles car ils ne tenaient pas leur place dans le DOM.

En substance, les conteneurs autour de mes SVG étaient à la largeur: 0 et à la surverse: cachés.

J'ai résolu ce problème en définissant une largeur sur les conteneurs, mais il est possible qu'il existe une solution plus directe à ce problème particulier.

2
Matt Grosso

J'ai rencontré ce problème et je l'ai résolu en supprimant le style de largeur que j'avais utilisé sur le SVG:

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

Je l'ai compris! La page était en utilisant le mode IE8 ... avait

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

dans l'en-tête ... changé en

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

9 et cela a fonctionné!

1
Rahil Pirani

Vous avez des attributs de style en double sur chaque élément.

style="opacity:0.8"

Cela ne s'affiche certainement pas sur Firefox pour moi à cause de cette erreur. S'il apparaît sur Chrome, il est préférable de générer un bogue Chrome.

0
Robert Longson