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.
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>
|<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
- Attributs de 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
BCD tables only load in the browser
Voir aussi
- Autres formes de base SVG :
<circle>
,<line>
,<polygon>
,<polyline>
,<rect>