Pourquoi les proportions des images SVG varient-elles dans Internet Explorer 9 ?

Problème de mise à l'échelle des proportions d'image dans Internet Explorer 9

Les images SVG s'affichent souvent avec des proportions inattendues dans Internet Explorer 9, même lorsque vous utilisez CSS pour spécifier une hauteur maximale. Cet écart devient apparent lorsque l'on compare le comportement de différents fichiers SVG.

Par exemple, supposons que nous ayons une image SVG avec des dimensions naturelles de 200 px sur 200 px et une hauteur maximale de 30 px définie en CSS :

<code class="css">img {
    max-height: 30px;
}</code>

Dans la plupart des navigateurs, cette image SVG évolue proportionnellement à une hauteur de 30 pixels. Cependant, dans Internet Explorer 9, il peut s'afficher en 30 x 200 pixels.

Ce problème semble être lié au type d'éléments SVG utilisés. Dans le SVG problématique, l'image est composée de polygones, tandis que dans le SVG correctement mis à l'échelle, elle est constituée de chemins.

Pour garantir une mise à l'échelle cohérente entre les navigateurs, il est recommandé de toujours spécifier une viewBox mais de la laisser de côté. les attributs width et height sur votre élément SVG. En suivant cette pratique, vous pouvez améliorer la compatibilité de vos images SVG dans Internet Explorer 9 et d'autres navigateurs.

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!