From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/svg/attribute/cy/index.html | 172 +++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/fr/web/svg/attribute/cy/index.html (limited to 'files/fr/web/svg/attribute/cy') diff --git a/files/fr/web/svg/attribute/cy/index.html b/files/fr/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..041e7bcdfd --- /dev/null +++ b/files/fr/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cy +--- +
{{SVGRef}}
+ +

L'attribut cy définit la coordonnée de l'axe y pour le point central d'un élément.

+ +

Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cy="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle  cy="50"  cx="50" r="45"/>
+  <ellipse cy="150" cx="50" rx="45" ry="25" />
+  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

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

+
+ +

circle

+ +

Pour un élément {{SVGElement('circle')}}, cy définit la coordonnée y de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.

+ +

ellipse

+ +

Pour un élément {{SVGElement('ellipse')}}, cy définit la coordonnée y de son centre.

+ + + + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
+ +

Note: À partir de SVG2, cy est une propriété de géométrie, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.

+ +

radialGradient

+ +

Pour un élément {{SVGElement('radialGradient')}}, cy définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la limite de dégradé de 100% corresponde au périmètre de ce plus grand cercle.

+ + + + + + + + + + + + + + + + +
Valeur<length>
Valeur par défaut50%
AnimationOui
+ +

Exemple

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cy="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "geometry.html#CY", "cy")}}{{Spec2("SVG2")}}Définition comme propriété de géométrie
{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG2")}}Définition pour SVG2
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <radialGradient>
{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <ellipse>
{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}Définition initiale pour <circle>
-- cgit v1.2.3-54-g00ecf