From 88dda3c00eefc18a29447e99ebd3177925602b52 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 1 Nov 2021 07:51:45 +0100 Subject: convert content to md --- files/fr/web/svg/attribute/cy/index.md | 277 ++++++++++++++++----------------- 1 file changed, 138 insertions(+), 139 deletions(-) (limited to 'files/fr/web/svg/attribute/cy') diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md index 24ec4c6c58..b230dfd661 100644 --- a/files/fr/web/svg/attribute/cy/index.md +++ b/files/fr/web/svg/attribute/cy/index.md @@ -6,167 +6,166 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/cy --- -
{{SVGRef}}
+{{SVGRef}} -

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

+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")}}

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

Exemple

+## Exemple - +```css hidden +html,body,svg { height:100% } +``` -
<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>
+```html
+
+  
+    
+    
+  
 
-  <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('exemple', '100%', 300)}}

+{{EmbedLiveSample('exemple', '100%', 300)}} -

circle

+## circle -

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

+Pour un élément {{SVGElement('circle')}}, `cy` définit la coordonnée y de son centre. - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
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.

-
+> **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

+## ellipse -

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

+Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de son centre. - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Valeur<length> | <percentage>
Valeur par défaut0
AnimationOui
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.

-
+> **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

+## 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.

+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é](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Valeur<length>
Valeur par défaut50%
AnimationOui
Valeur + <length> +
Valeur par défaut50%
AnimationOui
-

Autre 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>
+#### Autre exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +{{EmbedLiveSample('radialGradient', 150, '100%')}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------- | +| {{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 `` | +| {{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `` | +| {{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `` | -- cgit v1.2.3-54-g00ecf