Comment puis-je adapter les SVG en ligne pour les adapter à leurs conteneurs parents tout en conservant les proportions ?

Mise à l'échelle des SVG en ligne pour s'adapter aux conteneurs parents

Les SVG en ligne offrent la flexibilité d'ajouter des graphiques vectoriels directement aux documents HTML. Cependant, les mettre à l'échelle pour qu'ils correspondent à la taille du conteneur parent tout en conservant les proportions peut présenter un défi. Voici comment y parvenir en utilisant l'attribut viewBox :

Pour créer une échelle SVG en ligne, nous utilisons l'attribut viewBox sur l'élément SVG. Cet attribut définit le cadre de délimitation de l'image dans son propre système de coordonnées. Par la suite, nous spécifions la largeur et la hauteur souhaitées à l'aide des attributs width et height, qui sont relatifs à la page contenant.

Considérons l'exemple suivant, qui affiche un triangle de 10 px sur 20 px :

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

Ce SVG sera rendu sous la forme d'un triangle de 10 px sur 20 px dans le conteneur donné, quelle que soit sa taille. L'attribut viewBox (0 0 20 10) définit le système de coordonnées de l'image, (0,0) étant le coin supérieur gauche et (20,10) le coin inférieur droit. En spécifiant les attributs de largeur et de hauteur (non représentés dans l'exemple), nous redimensionnons l'image à la taille souhaitée par rapport au conteneur tout en conservant son rapport hauteur/largeur.

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!