J'utilise des icônes svg qui ont l'air bien sur différents navigateurs, mais sur IE11 certaines des limites des éléments svg, comme rect ou ligne, ne sont pas visibles sur certains niveaux de zoom. Par exemple, à 23px de largeur, tout est visible, mais sur 24px certaines bordures disparaissent.Les frontières des éléments Svg disparaissent lors du zoom IE11
Ceci est une image normale:
C'est zoomé un peu:
Un autre niveau de zoom:
Pour obtenir une mise à l'échelle plus cohérente d'un navigateur à l'autre, assurez-vous toujours de spécifier un viewBox mais laissez les attributs width et height sur votre élément svg.
source: SVG in img element proportions not respected in ie9
Une commande shell qui supprime width & height attributs de tous les fichiers SVG dans le répertoire courant:
find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'
Il ne voit pas m être un problème car le svg que j'utilise n'a pas la largeur et la hauteur, mais possède une viewBox générée par Illustrator. Une version simplifiée est: – ebsk
Même si je mets ce simple svg dont le résultat devrait être une ligne 1px IE une fois afficher une fois cacher la ligne lors du zoom. Le problème n'est bien sûr pas de zoomer mais de mettre à l'échelle le svg lui-même sur la page car sur certains affichages, il semblera tout à fait correct dans IE mais de l'autre il n'aura pas certaines lignes invisibles. – ebsk
Essayez de supprimer le 'width' et' height' sur le 'rect'. –
On suppose que probablement le meilleur façon de ne pas avoir de tels problèmes dans IE serait de ne pas utiliser svgs .. – ebsk