Comment faire évoluer les SVG en ligne proportionnellement à leur conteneur parent ?

Mise à l'échelle des SVG en ligne proportionnellement avec le conteneur parent

Avoir une échelle SVG en ligne proportionnelle à son conteneur parent est un moyen pratique de redimensionner dynamiquement le SVG contenu. Ceci est souhaitable lorsque vous devez intégrer des graphiques SVG dans des éléments HTML et vous assurer qu'ils évoluent de manière appropriée. Voici comment y parvenir :

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

Dans cet exemple, l'élément SVG a une largeur de 100 et une hauteur de 50, telles que définies par l'attribut viewBox. L'élément polygone représente un triangle qui s'étend sur toute la largeur et la hauteur du SVG.

L'attribut viewBox spécifie les coordonnées du contenu du SVG. Dans ce cas, les coordonnées vont de 0 à 100 horizontalement et de 0 à 50 verticalement. Même si vous redimensionnez l'élément SVG à l'aide de CSS, le triangle remplira toujours toute la zone viewBox.

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

En définissant la largeur de l'élément SVG, nous pouvons spécifier la taille souhaitée de l'élément conteneur. La hauteur sera automatiquement ajustée pour conserver les proportions du SVG, garantissant que le triangle reste proportionnellement mis à l'échelle.

Cette approche vous permet d'intégrer des SVG dans des éléments HTML et de contrôler leur taille de manière dynamique sans utiliser de fichiers externes ni sacrifier le style. options.

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!