Comment puis-je mettre à l'échelle un SVG en ligne pour l'adapter à son conteneur parent ?

Comment mettre à l'échelle un élément SVG en ligne

Dans certains scénarios, les développeurs peuvent avoir besoin de redimensionner dynamiquement une image SVG en ligne pour qu'elle corresponde à la taille de son conteneur parent. Ceci peut être réalisé sans référencer un fichier SVG externe et permet l'application de styles CSS supplémentaires au contenu du SVG.

Pour mettre à l'échelle un SVG en ligne, suivez les étapes suivantes :

1. Spécifiez l'attribut Viewbox :
   Définissez le cadre de délimitation de l'image dans son système de coordonnées à l'aide de l'attribut viewBox sur l'élément SVG. Les valeurs représentent les coordonnées x et y du coin supérieur gauche et du coin inférieur droit du SVG.
2. Définissez les attributs de largeur et de hauteur :
   Spécifiez la largeur et la hauteur. du SVG tel qu'il doit apparaître dans la page contenant en utilisant les attributs width et height. Ces valeurs dictent la façon dont le SVG évolue proportionnellement.

Par exemple, le code suivant affichera un triangle dans un cadre de délimitation de 10 x 20 px, qui sera ensuite mis à l'échelle pour s'adapter à son conteneur parent :

svg {
  border: 1px solid blue;
}

<svg>
  <polygon fill=red stroke-width=0
           points="0,10 20,10 10,0" />
</svg>

En spécifiant les coordonnées dans le SVG indépendamment de sa taille mise à l'échelle, l'image conservera ses proportions et s'affichera correctement quel que soit la taille de son conteneur. taille.

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!