<ellipse>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The <ellipse> SVG 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.
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 |
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.
Example
html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # EllipseElement |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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
See also
- Other SVG basic shapes:
<circle>,<line>,<polygon>,<polyline>,<rect>