Pourquoi mes fichiers SVG ne sont-ils pas mis à l'échelle correctement dans IE9, mais seulement pour certains d'entre eux ?

Proportions SVG déformées dans IE9 pour des images spécifiques

Lors de l'utilisation de SVG dans des éléments img, vous pouvez rencontrer des problèmes de mise à l'échelle inattendus. Dans Internet Explorer 9, certains fichiers SVG peuvent ne pas être mis à l'échelle correctement et ne pas conserver leurs proportions d'origine. Cela peut se produire malgré la spécification de la hauteur maximale via CSS.

La divergence survient lors de l'utilisation de SVG composés de chemins par rapport à des polygones. Par exemple, l'image "crocs.svg" mentionnée dans la question n'est pas mise à l'échelle correctement, contrairement à l'image "groovy.svg".

Solution : assurez-vous que ViewBox et omettez les attributs de largeur/hauteur des éléments

Pour résoudre ce problème et garantir une mise à l'échelle cohérente entre les navigateurs, il est recommandé de toujours spécifier un attribut viewBox dans votre élément SVG. Cependant, laissez les attributs width et height vides.

En faisant cela, vous définissez explicitement les dimensions du SVG et autorisez les navigateurs à interpréter la propriété CSS max-height en conséquence. Il garantit une mise à l'échelle plus cohérente sur différents navigateurs.

Pour plus de compréhension, reportez-vous à cette page de test : [Lien de la page de test]. Cette page fournit divers exemples d'attributs SVG en combinaison avec les spécifications CSS de largeur et de hauteur. En comparant la mise à l'échelle dans différents navigateurs, vous pouvez observer l'impact de ces attributs sur le rendu SVG.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!