Open In App

SVG Ellipse Element

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads