SVG preserveAspectRatio - Attributs de rencontre et de découpe


Exemple

L'attribut preserveAspectRatio a un paramètre facultatif: meet | slice Le comportement par défaut est meet qui étend le contenu à la fois dans la dimension x et y jusqu'à ce qu'il remplisse la largeur ou hauteur de la viewBox. La variante - slice conserve le rapport d'aspect du contenu mais transforme le graphique jusqu'à ce qu'il remplisse à la fois la largeur et la hauteur de la zone de visualisation (en écrêtant le contenu qui déborde de la zone de visualisation).

Ceci est l'exemple en utilisant slice

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />

qui rend comme:

entrer la description de l'image ici

et le même exemple en utilisant meet

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

qui rend comme:

entrer la description de l'image ici