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:
