SVG Ellipse Element
Last Updated :
31 Mar, 2022
The SVG <ellipse> element is used to create an ellipse. The difference between circle and ellipse is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:
Syntax:
<ellipse
cx="x-axis co-ordinate"
cy="y-axis co-ordinate"
rx="length"
ry="length" >
</ellipse>
Attributes:
- cx: x-axis co-ordinate of the center.
- cy: y-axis co-ordinate of the center.
- rx: x-axis radius of the ellipse.
- ry: y-axis radius of the ellipse.
Example:
< html >
< title >SVG Ellipse</ title >
< body >
< svg width = "400" height = "400" >
< ellipse cx = "100" cy = "100" rx = "90" ry = "50"
stroke = "black" stroke-width = "2" fill = "grey" >
</ ellipse >
</ svg >
</ body >
</ html >
|
Output:
Example: Change the opacity.
< html >
< title >SVG Ellipse</ title >
< body >
< svg width = "400" height = "400" >
< ellipse cx = "100" cy = "100" rx = "90" ry = "50"
stroke = "black" stroke-width = "2" fill = "grey"
opacity = "0.5" >
</ ellipse >
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...