Comment puis-je créer une échelle SVG en ligne avec son conteneur parent ?

Mise à l'échelle du SVG en ligne avec son conteneur parent

L'incorporation d'éléments SVG en ligne dans le code HTML offre l'avantage de les styliser avec CSS. Cependant, mettre à l'échelle de tels éléments SVG pour qu'ils correspondent aux dimensions de leur conteneur parent peut être un défi.

Solution

Pour mettre à l'échelle un SVG en ligne avec son conteneur parent, il est Il est nécessaire d'utiliser l'attribut viewBox en conjonction avec les attributs width et height :

1. attribut viewBox : Cet attribut définit le cadre de délimitation de l'image SVG dans son propre système de coordonnées. Il établit le rapport hauteur/largeur et les dimensions initiales de l'image SVG. En définissant cet attribut, vous pouvez spécifier les coordonnées dans l'image SVG indépendamment de sa taille mise à l'échelle.
2. Attributs de largeur et de hauteur : Ces attributs spécifient la largeur et la hauteur de l'élément SVG dans le page contenant. Ils contrôlent la taille de l'image SVG telle qu'elle apparaît sur la page. En définissant ces attributs par rapport aux dimensions du conteneur (par exemple, en utilisant des pourcentages), vous pouvez redimensionner l'image SVG proportionnellement.

Par exemple, considérons le code suivant :

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

Dans cet exemple, l'image SVG d'une taille native de 123 px sur 456 px est mise à l'échelle pour remplir l'intégralité du conteneur. L'attribut viewBox définit les coordonnées du polygone dans l'image SVG elle-même, tandis que les attributs width et height redimensionnent l'image SVG aux dimensions du conteneur. En conséquence, le polygone s'affiche sous la forme d'un triangle rouge de 100 % de largeur à l'intérieur du conteneur.

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!