<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.
The <ellipse>
element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
Note: Ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform
attribute.
Example
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
Attributes
cx
-
The x position of the center of the ellipse. Value type: <length>|<percentage> ; Default value:
0
; Animatable: yes cy
-
The y position of the center of the ellipse. Value type: <length>|<percentage> ; Default value:
0
; Animatable: yes rx
-
The radius of the ellipse on the x axis. Value type:
auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes ry
-
The radius of the ellipse on the y axis. Value type:
auto
|<length>|<percentage> ; Default value:auto
; Animatable: yes pathLength
-
This attribute lets specify the total length for the path, in user units. Value type: <number> ; Default value: none; Animatable: yes
Note: Starting with SVG2 cx
, cy
, rx
and ry
are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.
Usage context
Categories | Basic shape element, Graphics element, Shape element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # EllipseElement |
Browser compatibility
BCD tables only load in the browser
See also
- Other SVG basic shapes:
<circle>
,<line>
,<polygon>
,<polyline>
,<rect>