ellipse

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ellipse
cx
cy
fill
context-fill value
rx
ry
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Voir aussi