1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: ellipse
slug: Web/SVG/Element/ellipse
tags:
- SVG
- SVG Element
- SVG Reference
translation_of: Web/SVG/Element/ellipse
---
<div>{{SVGRef}}</div>
<p>L'élément <code>ellipse</code> est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.</p>
<div class="blockIndicator note">
<p><strong>Note:</strong> Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}.</p>
</div>
<pre class="notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg></pre>
<h2 id="Attributs">Attributs</h2>
<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
<dl>
<dt>{{ SVGAttr("cx") }}</dt>
<dd>La position x de l'ellipse.<br>
<small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd>
<dt>{{ SVGAttr("cy") }}</dt>
<dd>La position y de l'ellipse.<br>
<small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd>
<dt>{{ SVGAttr("rx") }}</dt>
<dd>Le rayon de l'ellipse sur l'axe x.<br>
<small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
<dt>{{ SVGAttr("ry") }}</dt>
<dd>Le rayon de l'ellipse sur l'axe y.<br>
<small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
<dt>{{ SVGAttr("pathLength") }}</dt>
<dd>Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur.<br>
<small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Number"><number></a></strong>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
</dl>
<div class="blockIndicator note">
<p><strong>Note:</strong> À partir de SVG2, cx, cy, rx, et ry sont des <em>Propriétés Géomatriques</em>, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément.</p>
</div>
<h3 id="Attributs_Globaux">Attributs Globaux</h3>
<dl>
<dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs centraux</a></dt>
<dd>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</dd>
<dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
<dd>{{SVGAttr('class')}}, {{SVGAttr('style')}}</dd>
<dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
<dd>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</dd>
<dt>Attributs d'événements</dt>
<dd><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attributs d'événément globaux</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attributs d'événément graphiques</a></dd>
<dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
<dd>Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</dd>
<dt>Attributs ARIA</dt>
<dd><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></dd>
</dl>
<h2 id="Usage">Usage</h2>
<p>{{svginfo}}</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', 'shapes.html#EllipseElement', '<ellipse>')}}</td>
<td>{{Spec2('SVG2')}}</td>
<td>Ajout de la valeur <code>auto</code> pour <code>rx</code> et <code>ry</code></td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Interface_DOM">Interface DOM</h2>
<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGEllipseElement" title="en/DOM/SVGEllipseElement">SVGEllipseElement</a></code>.</p>
<h2 id="Specifications">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', 'shapes.html#EllipseElement', '<ellipse>')}}</td>
<td>{{Spec2('SVG2')}}</td>
<td>Ajout de la valeur <code>auto</code> pour <code>rx</code> et <code>ry</code>.</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("svg.elements.ellipse")}}</p>
<h2 id="See_also">Voir aussi</h2>
<ul>
<li>Autres formes de base SVG : <strong>{{SVGElement('circle')}}</strong>, {{SVGElement('line')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}</li>
</ul>
|
