Comment puis-je mettre à l'échelle les SVG en ligne pour les adapter à leurs conteneurs parents à l'aide de « viewBox », « largeur » et « hauteur » ?

Mise à l'échelle des SVG en ligne avec des conteneurs parents

Lorsque vous travaillez avec des éléments SVG (Scalable Vector Graphics) en ligne, vous rencontrez souvent le besoin de mettre à l'échelle le SVG pour qu'il corresponde aux dimensions de son conteneur parent. Bien qu'il soit possible d'obtenir une mise à l'échelle en référençant un fichier SVG externe, cette approche peut limiter la possibilité de styliser le SVG à l'aide de CSS. Par conséquent, une solution plus souhaitable consiste à mettre à l'échelle directement les SVG en ligne.

Définition des coordonnées de l'image avec viewBox et mise à l'échelle avec la largeur/hauteur

Pour définir les coordonnées internes de l'image SVG et déterminer son évolution , utilisez les attributs suivants :

• viewBox : définit le cadre de délimitation du image dans son propre système de coordonnées.
• largeur : Largeur du SVG en unités par rapport à la page contenant.
• hauteur : Hauteur du SVG en unités par rapport à la page contenant.

Par exemple, considérons le SVG en ligne suivant avec un rouge triangle :

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

Ici, nous avons :

• viewBox (0, 0, 20, 10) : Spécifie que le SVG a un cadre de délimitation rectangulaire d'une largeur de 20 unités et une hauteur de 10 unités.
• largeur (10) : Spécifie que le SVG doit avoir une largeur de 10 unités par rapport à la page contenant.
• hauteur (20) : Spécifie que le SVG doit avoir une hauteur de 20 unités par rapport à la page contenant.

Ce SVG sera rendu sous la forme d'un rendu de 10 px de large et de 20 px de haut. triangle rouge.

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!