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/cx/index.html | 172 +++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/fr/web/svg/attribute/cx/index.html (limited to 'files/fr/web/svg/attribute/cx/index.html') diff --git a/files/fr/web/svg/attribute/cx/index.html b/files/fr/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..bb97ab6341 --- /dev/null +++ b/files/fr/web/svg/attribute/cx/index.html @@ -0,0 +1,172 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cx +--- +

{{SVGRef}}

+ +

L'attribut cx définit la coordonnée de l'axe x 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 300 100" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cx="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle cx="50" cy="50" r="45"/>
+  <ellipse cx="150" cy="50" rx="45" ry="25" />
+  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

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

+
+ +

circle

+ +

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

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

Note: À partir de SVG2, cx 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')}}, cx définit la coordonnées x de son centre.

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

Note: À partir de SVG2, cx 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')}}, cx 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 du dégradé à 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 cx="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="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#CX", "cx")}}{{Spec2("SVG2")}}Définition comme propriété de géométrie
{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG2")}}Définition pour SVG2
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <radialGradient>
{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <ellipse>
{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}Définition initiale pour <circle>
-- cgit v1.2.3-54-g00ecf