SVG Ellipse Element
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:
Contact Us