Pourquoi mes images SVG sont-elles déformées dans IE9 ? Le rôle de ViewBox et la mise à l'échelle cohérente.

Proportions des images SVG dans IE9 et rôle de ViewBox

Lors de l'utilisation d'images SVG dans un fichier élément, on s'attend à ce que les proportions naturelles de l'image soient conservées lors de la mise à l'échelle. Cependant, dans IE9, ce comportement peut varier en fonction de la structure du fichier SVG.

Problème :
Certains SVG, en particulier ceux composés de polygones, ne parviennent pas à être mis à l'échelle proportionnellement dans IE9. lorsqu'il est contenu dans un élément avec un jeu de propriétés CSS de hauteur maximale. Cela entraîne une image étirée ou déformée.

Raison :
La différence de comportement de mise à l'échelle entre les SVG contenant des polygones et des chemins est attribuée à la présence ou à l'absence d'un attribut viewBox dans le Fichier SVG.

Solution :
Pour garantir une mise à l'échelle cohérente entre les navigateurs, il est recommandé de toujours spécifier un attribut viewBox dans le fichier SVG. Cet attribut définit l'espace de coordonnées de l'image SVG. En laissant les attributs width et height du

Exemple :
Le code suivant illustre cette solution :

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<polygon points="..." />
</svg></code>

En incorporant un viewBox, IE9 et d'autres navigateurs mettront systématiquement à l'échelle l'image SVG tout en conservant son rapport hauteur/largeur, quelle que soit la présence de polygones ou de chemins.

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!