ellipse

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.

<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> (en-US)|<pourcentage> (en-US); Valeur par défaut :0; Animable : oui.

cy

La position y de l'ellipse. Type de valeur : <longueur> (en-US)|<pourcentage> (en-US); Valeur par défaut :0; Animable :oui.

rx (en-US)

Le rayon de l'ellipse sur l'axe x. Type de valeur : auto|<longueur> (en-US)|<pourcentage> (en-US); Valeur par défaut :auto; Animable : oui.

ry (en-US)

Le rayon de l'ellipse sur l'axe y. Type de valeur : auto|<longueur> (en-US)|<pourcentage> (en-US); Valeur par défaut :auto; Animable : oui.

pathLength (en-US)

Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur. Type de valeur : <number> (en-US); 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 (en-US), tabindex (en-US)

Attributs de style
class (en-US), style
Attributs de traitement conditionnel

Plus notamment : requiredExtensions, systemLanguage (en-US)

Attributs d'événements

Attributs d'évènement globaux, Attributs d'évènement graphiques

Attributs de présentation

Plus notamment : clip-path, clip-rule (en-US), color, color-interpolation (en-US), color-rendering, cursor (en-US), display (en-US), fill, fill-opacity, fill-rule, filter (en-US), mask, opacity (en-US), pointer-events (en-US), shape-rendering (en-US), stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect (en-US), visibility (en-US)

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

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<ellipse>' dans cette spécification.
Candidat au statut de recommandation Ajout de la valeur auto pour rx et ry
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<ellipse>' dans cette spécification.
Recommendation Définition initiale

Interface DOM

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

Spécifications

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de '<ellipse>' dans cette spécification.
Candidat au statut de recommandation Ajout de la valeur auto pour rx et ry.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<ellipse>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi