aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/svg/attribute/cy/index.md
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-11-01 07:51:27 +0100
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-07 11:57:29 +0100
commit7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a (patch)
tree98beab4363e778deb9e251db56c2a5b1248f2697 /files/fr/web/svg/attribute/cy/index.md
parentc5054b32e0e496608030b5148ebba6d76db8ba7f (diff)
downloadtranslated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.tar.gz
translated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.tar.bz2
translated-content-7040e4bc9c98e0c50ce903a5cbeeabeda2ed908a.zip
move *.html to *.md
Diffstat (limited to 'files/fr/web/svg/attribute/cy/index.md')
-rw-r--r--files/fr/web/svg/attribute/cy/index.md172
1 files changed, 172 insertions, 0 deletions
diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md
new file mode 100644
index 0000000000..24ec4c6c58
--- /dev/null
+++ b/files/fr/web/svg/attribute/cy/index.md
@@ -0,0 +1,172 @@
+---
+title: cy
+slug: Web/SVG/Attribute/cy
+tags:
+ - SVG
+ - SVG Attribute
+translation_of: Web/SVG/Attribute/cy
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>cy</code></strong> définit la coordonnée de l'axe y pour le point central d'un élément.</p>
+
+<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p>
+
+<h2>Exemple</h2>
+
+<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;radialGradient cy="25%" id="myGradient"&gt;
+ &lt;stop offset="0" stop-color="white" /&gt;
+ &lt;stop offset="100%" stop-color="black" /&gt;
+ &lt;/radialGradient&gt;
+
+ &lt;circle cy="50" cx="50" r="45"/&gt;
+ &lt;ellipse cy="150" cx="50" rx="45" ry="25" /&gt;
+ &lt;rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('exemple', '100%', 300)}}</p>
+
+<h2 id="circle">circle</h2>
+
+<p>Pour un élément {{SVGElement('circle')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="row">Valeur</th>
+ <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+ </tr>
+ <tr>
+ <th scope="row">Valeur par défaut</th>
+ <td><code>0</code></td>
+ </tr>
+ <tr>
+ <th scope="row">Animation</th>
+ <td>Oui</td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="note">
+ <p><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p>
+</div>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Pour un élément {{SVGElement('ellipse')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="row">Valeur</th>
+ <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+ </tr>
+ <tr>
+ <th scope="row">Valeur par défaut</th>
+ <td><code>0</code></td>
+ </tr>
+ <tr>
+ <th scope="row">Animation</th>
+ <td>Oui</td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="note">
+ <p><strong>Note :</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p>
+</div>
+
+<h2 id="radialGradient">radialGradient</h2>
+
+<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> 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 <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="row">Valeur</th>
+ <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+ </tr>
+ <tr>
+ <th scope="row">Valeur par défaut</th>
+ <td><code>50%</code></td>
+ </tr>
+ <tr>
+ <th scope="row">Animation</th>
+ <td>Oui</td>
+ </tr>
+ </tbody>
+</table>
+
+<h4 id="autre_exemple">Autre exemple</h4>
+
+<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;defs&gt;
+ &lt;radialGradient cy="0" id="myGradient000"&gt;
+ &lt;stop offset="0%" stop-color="gold" /&gt;
+ &lt;stop offset="50%" stop-color="green" /&gt;
+ &lt;stop offset="100%" stop-color="white" /&gt;
+ &lt;/radialGradient&gt;
+
+ &lt;radialGradient cy="50%" id="myGradient050"&gt;
+ &lt;stop offset="0%" stop-color="gold" /&gt;
+ &lt;stop offset="50%" stop-color="green" /&gt;
+ &lt;stop offset="100%" stop-color="white" /&gt;
+ &lt;/radialGradient&gt;
+
+ &lt;radialGradient cy="100%" id="myGradient100"&gt;
+ &lt;stop offset="0%" stop-color="gold" /&gt;
+ &lt;stop offset="50%" stop-color="green" /&gt;
+ &lt;stop offset="100%" stop-color="white" /&gt;
+ &lt;/radialGradient&gt;
+ &lt;/defs&gt;
+
+ &lt;rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
+ &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
+ &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">Statut</th>
+ <th scope="col">Commentaire</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td>
+ <td>{{Spec2("SVG2")}}</td>
+ <td>Définition comme propriété de géométrie</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
+ <td>{{Spec2("SVG2")}}</td>
+ <td>Définition pour SVG2</td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Définition initiale pour <code>&lt;radialGradient&gt;</code></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Définition initiale pour <code>&lt;ellipse&gt;</code></td>
+ </tr>
+ <tr>
+ <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td>
+ <td>{{Spec2("SVG1.1")}}</td>
+ <td>Définition initiale pour <code>&lt;circle&gt;</code></td>
+ </tr>
+ </tbody>
+</table>