From 7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:27 +0100 Subject: move *.html to *.md --- .../svg/attribute/preserveaspectratio/index.html | 391 --------------------- 1 file changed, 391 deletions(-) delete mode 100644 files/fr/web/svg/attribute/preserveaspectratio/index.html (limited to 'files/fr/web/svg/attribute/preserveaspectratio/index.html') diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html deleted file mode 100644 index 894241bcf5..0000000000 --- a/files/fr/web/svg/attribute/preserveaspectratio/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: preserveAspectRatio -slug: Web/SVG/Attribute/preserveAspectRatio -tags: - - SVG - - SVG Attribute -translation_of: Web/SVG/Attribute/preserveAspectRatio ---- -
{{SVGRef}}
- -

L'attibut preserveAspectRatio indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la 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éfinies par l'attribut viewBox, si ce dernier n'est pas défini 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>
-
-  <!-- (largeur>hauteur) 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>
-
-  <!-- (largeur>hauteur) 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>
-
-  <!-- (largeur<hauteur) 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>
-
-  <!-- (largeur<hauteur) 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>
- - - - -

{{EmbedLiveSample('topExample', '100%', 200)}}

- -

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 de la 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> vaut none, 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.
    • -
-
-
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
      • -
    - Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la viewBox (la zone dans laquelle sera dessinée la viewBox 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
      • -
    - Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la viewBox sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la viewBox sera plus grande que la zone d'affichage).
    • -
-
-
- -

É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éfautxMidYMid meet
AnimationOui
- -

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éfautxMidYMid meet
AnimationOui
- -

marker

- -

Pour <marker>, preserveAspectRatio indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

- - - - - - - - - - - - - - - - -
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
- -

pattern

- -

Pour <pattern>, preserveAspectRatio indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

- - - - - - - - - - - - - - - - -
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
- -

svg

- -

Pour <svg>, preserveAspectRatio indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

- - - - - - - - - - - - - - - - -
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
- -

symbol

- -

Pour <symbol>, preserveAspectRatio indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

- - - - - - - - - - - - - - - - -
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
- -

view

- -

Pour <view>, preserveAspectRatio indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.

- - - - - - - - - - - - - - - - -
Valeur<align> <meetOrSlice>?
Valeur par défautxMidYMid meet
AnimationOui
- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}{{Spec2('Filters 1.0')}}
{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}{{Spec2("SVG1.1")}}Définition initiale
-- cgit v1.2.3-54-g00ecf