L'attibut preserveAspectRatio
indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du viewBox
est différent du ratio de la zone d'affichage (définit par les attributs width et height).
Parce que les proportions du SVG sont définis par l'attribut viewBox
, si ce dernier n'est pas définit alors l'attribut preserveAspectRatio
n'a aucun effet (à l'exception près de l'élément <image>
comme décrit ci-dessous).
Exemple
<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
<!-- (width>height) meet -->
<svg preserveAspectRatio="xMidYMid meet" x="0" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMinYMid meet" x="25" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMaxYMid meet" x="50" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<!-- (width>height) slice -->
<svg preserveAspectRatio="xMidYMin slice" x="0" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMidYMid slice" x="25" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMidYMax slice" x="50" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg>
<!-- (width<height) meet -->
<svg preserveAspectRatio="xMidYMin meet" x="75" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMidYMid meet" x="90" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMidYMax meet" x="105" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<!-- (width<height) slice -->
<svg preserveAspectRatio="xMinYMid slice" x="120" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMidYMid slice" x="135" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<svg preserveAspectRatio="xMaxYMid slice" x="150" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg>
<!-- none -->
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg>
</svg>
topExample
html,body,svg { height:100% }
<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
</defs>
<!-- (width>height) meet -->
<rect x="0" y="0" width="20" height="10">
<title>xMidYMid meet</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMidYMid meet" x="0" y="0">
<use href="#smiley" />
</svg>
<rect x="25" y="0" width="20" height="10">
<title>xMinYMid meet</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMinYMid meet" x="25" y="0">
<use href="#smiley" />
</svg>
<rect x="50" y="0" width="20" height="10">
<title>xMaxYMid meet</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMaxYMid meet" x="50" y="0">
<use href="#smiley" />
</svg>
<!-- (width>height) slice -->
<rect x="0" y="15" width="20" height="10">
<title>xMidYMin slice</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMidYMin slice" x="0" y="15">
<use href="#smiley" />
</svg>
<rect x="25" y="15" width="20" height="10">
<title>xMidYMid slice</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMidYMid slice" x="25" y="15">
<use href="#smiley" />
</svg>
<rect x="50" y="15" width="20" height="10">
<title>xMidYMax slice</title>
</rect>
<svg viewBox="0 0 100 100" width="20" height="10"
preserveAspectRatio="xMidYMax slice" x="50" y="15">
<use href="#smiley" />
</svg>
<!-- (width<height) meet -->
<rect x="75" y="0" width="10" height="25">
<title>xMidYMin meet</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMidYMin meet" x="75" y="0">
<use href="#smiley" />
</svg>
<rect x="90" y="0" width="10" height="25">
<title>xMidYMid meet</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMidYMid meet" x="90" y="0">
<use href="#smiley" />
</svg>
<rect x="105" y="0" width="10" height="25">
<title>xMidYMax meet</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMidYMax meet" x="105" y="0">
<use href="#smiley" />
</svg>
<!-- (width<height) slice -->
<rect x="120" y="0" width="10" height="25">
<title>xMinYMid slice</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMinYMid slice" x="120" y="0">
<use href="#smiley" />
</svg>
<rect x="135" y="0" width="10" height="25">
<title>xMidYMid slice</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMidYMid slice" x="135" y="0">
<use href="#smiley" />
</svg>
<rect x="150" y="0" width="10" height="25">
<title>xMaxYMid slice</title>
</rect>
<svg viewBox="0 0 100 100" width="10" height="25"
preserveAspectRatio="xMaxYMid slice" x="150" y="0">
<use href="#smiley" />
</svg>
<!-- none -->
<rect x="0" y="30" width="160" height="60">
<title>none</title>
</rect>
<svg viewBox="0 0 100 100" width="160" height="60"
preserveAspectRatio="none" x="0" y="30">
<use href="#smiley" />
</svg>
</svg>
path {
fill: yellow;
stroke: black;
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
rect:hover, rect:active {
outline: 1px solid red;
}
Syntaxe
preserveAspectRatio="<align> [<meetOrSlice>]"
La valeur de l'attribut est constituée d'un ou deux mots clés: l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:
- Alignement
- L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur du
viewBox
ne correspond pas à celui affiché. Les différentes valeurs possibles sont:- none
Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. Notez que si<align>
vautnone
, alors la valeur<meetOrSlice>
est ignorée. - xMinYMin - Force la mise à l'échelle uniforme.
Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
Aligne le côté haut de l'élément en haut de la zone d'affichage. - xMidYMin - Force la mise à l'échelle uniforme.
Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
Aligne le côté haut de l'élément en haut de la zone d'affichage. - xMaxYMin - Force la mise à l'échelle uniforme.
Aligne le côté droit de l'élément à droite de la zone d'affichage.
Aligne le côté haut de l'élément en haut de la zone d'affichage. - xMinYMid - Force la mise à l'échelle uniforme.
Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. - xMidYMid (par défaut) - Force la mise à l'échelle uniforme.
Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. - xMaxYMid - Force la mise à l'échelle uniforme.
Aligne le côté droit de l'élément à droite de la zone d'affichage.
Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. - xMinYMax - Force la mise à l'échelle uniforme.
Aligne le côté gauche de l'élément à gauche de la zone d'affichage.
Aligne le côté bas de l'élément en bas de la zone d'affichage. - xMidYMax - Force la mise à l'échelle uniforme.
Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.
Aligne le côté bas de l'élément en bas de la zone d'affichage. - xMaxYMax - Force la mise à l'échelle uniforme.
Aligne le côté droit de l'élément à droite de la zone d'affichage.
Aligne le côté bas de l'élément en bas de la zone d'affichage.
- none
- Meet ou slice
- La valeur meet ou slice est optionnelle. Les deux valeurs possibles sont:
- meet (par défaut) - Mettre à l'échelle l'image tel que:
- les proportions sont préservées
- la
viewBox
est entièrement visible dans la zone d'affichage - la
viewBox
est agrandie autant que possible, tout en respectant les autres critères
viewBox
(la zone dans laquelle sera dessinée laviewBox
sera plus petite que la zone d'affichage). - slice - Mettre à l'échelle l'image tel que:
- les proportions sont préservées
- la zone d'affichage est entièrement remplie par la
viewBox
- la
viewBox
est réduite autant que possible, tout en respectant les autres critères
viewBox
sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée laviewBox
sera plus grande que la zone d'affichage).
- meet (par défaut) - Mettre à l'échelle l'image tel que:
Éléments
Sept éléments utilisent cet attribut: <svg>
, <symbol>
, <image>
, <feImage>
, <marker>
, <pattern>
, and <view>
.
feImage
Pour <feImage>
, preserveAspectRatio
définit comment l'image doit être ajustée dans le rectangle défini par l'élément <feImage>
.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
image
Pour <feImage>
, preserveAspectRatio
définit comment l'image doit être ajustée dans le rectangle défini par l'élément <image>
.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
marker
Pour <marker>
, preserveAspectRatio
indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
pattern
Pour <pattern>
, preserveAspectRatio
indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
svg
Pour <svg>
, preserveAspectRatio
indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
symbol
Pour <symbol>
, preserveAspectRatio
indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
view
Pour <view>
, preserveAspectRatio
indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.
Valeur | <align> <meetOrSlice>? |
---|---|
Valeur par défaut | xMidYMid meet |
Animation | Oui |
Spécification
Spécification | Statut | Commentaire |
---|---|---|
Filter Effects Module Level 1 La définition de 'preserveAspectRatio' dans cette spécification. |
Version de travail | |
Scalable Vector Graphics (SVG) 2 La définition de 'preserveAspectRatio' dans cette spécification. |
Candidat au statut de recommandation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de 'preserveAspectRatio' dans cette spécification. |
Recommendation | Définition initiale |