ellipse

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

L'élément ellipse est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.

Note : 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 transform.

xml

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

Attributs

Attributs spécifiques

cx: La position x de l'ellipse. Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable : oui.
cy: La position y de l'ellipse. Type de valeur : <longueur>|<pourcentage>; Valeur par défaut : 0; Animable :oui.
rx: Le rayon de l'ellipse sur l'axe x. Type de valeur : auto|<longueur>|<pourcentage>; Valeur par défaut : auto; Animable : oui.
ry: Le rayon de l'ellipse sur l'axe y. Type de valeur : auto|<longueur>|<pourcentage>; Valeur par défaut : auto; Animable : oui.
pathLength: Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur. Type de valeur : <number>; Valeur par défaut : auto; Animable : oui.

Note : À partir de SVG2, cx, cy, rx, et ry sont des Propriétés Géomatriques, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément.

Attributs Globaux

Attributs centraux: Plus notamment : id, tabindex
Attributs de style: class, style
Attributs de traitement conditionnel: Plus notamment : requiredExtensions, systemLanguage
Attributs d'événements: Attributs d'évènement globaux, Attributs d'évènement graphiques
Attributs de présentation: Plus notamment : clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Attributs ARIA: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage

Catégories	Élément de forme basique, Élément graphique, Élément de forme
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs

Interface DOM

Cet élément implémente l'interface SVGEllipseElement.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # EllipseElement

Compatibilité des navigateurs

Voir aussi

Autres formes de base SVG : <circle>, <line>, <polygon>, <polyline>, <rect>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨7 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content