Pourquoi certaines images SVG évoluent-elles de manière disproportionnée dans IE9 ?

Résoudre les problèmes de mise à l'échelle avec les images SVG dans IE9

Certaines images SVG ne parviennent pas à être mises à l'échelle proportionnellement aux hauteurs maximales spécifiées dans l'élément img, même si la largeur est absente. On observe que cette mise à l'échelle disproportionnée affecte majoritairement les SVG composés de polygones et non ceux créés à l'aide de chemins.

Comprendre l'écart

L'incohérence provient d'un manque de standardisation dans la gestion de l'attribut viewBox. Une viewBox définit explicitement les coordonnées et les dimensions du contenu du SVG, ce qui permet de le mettre à l'échelle correctement. Cependant, les navigateurs interprètent viewBox différemment.

Dans l'exemple concerné, le SVG n'a pas d'attribut viewBox. Par conséquent, IE9 interprète les propriétés de largeur et de hauteur de l'élément SVG (plutôt que l'élément image) pour la mise à l'échelle, ce qui entraîne une mise à l'échelle disproportionnée.

Résoudre le problème

Pour garantir une mise à l'échelle cohérente entre les navigateurs , assurez-vous de spécifier une viewBox pour votre image SVG tout en omettant les attributs width et height de l'élément SVG. Cette approche fournit des conseils explicites au navigateur, éliminant ainsi l'incertitude qui conduit à une mise à l'échelle disproportionnée dans IE9.

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!