SVG Ellipse<ellipse>

In SVG, the<ellipse>element is used to draw ellipses, and it is one of the commonly used basic shapes in SVG.

Using the<ellipse>element, you can create elliptical shapes, and control the position, size, and style of the ellipse by setting attributes.

Basic Syntax

<ellipse
  cx="x-coordinate"      <!-- 椭圆中心点的 x 坐标 -->
  cy="y-coordinate"      <!-- 椭圆中心点的 y 坐标 -->
  rx="x-radius"          <!-- 椭圆水平轴的半径 -->
  ry="y-radius"          <!-- 椭圆垂直轴的半径 -->
  fill="fill-color"      <!-- 椭圆的填充颜色 -->
  stroke="stroke-color"  <!-- 椭圆的描边颜色 -->
  stroke-width="width"   <!-- 椭圆的描边宽度 -->
/>

Attribute explanation:

cxandcyThe attribute defines the center point coordinates of the ellipse, i.e. the center position of the ellipse.
rxThe attribute defines the radius of the ellipse's horizontal axis (x-axis).
ryThe attribute defines the radius of the ellipse's vertical axis (y-axis).
fillThe attribute defines the fill color of the ellipse.
strokeThe attribute defines the stroke color of the ellipse.
stroke-widthThe attribute defines the stroke width of the ellipse.

The following code draws an ellipse with a blue fill, black stroke, horizontal axis radius of 80 pixels, vertical axis radius of 50 pixels, and center point coordinates of (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

Example 1

An ellipse is very similar to a circle, except that the ellipse has different x and y radii, while a circle has the same x and y radii.

The following is the SVG code:

Example

Try it Yourself »

Click to view:View SVG file。

Code explanation:

The CX attribute defines the x coordinate of the ellipse's center.
The CY attribute defines the y coordinate of the ellipse's center.
The RX attribute defines the horizontal radius.
The RY attribute defines the vertical radius.

Example 2

The following example creates three ellipses stacked on top of each other.

The following is the SVG code:

Example

Try it Yourself »

Click to view:View SVG file。

Example 3

The following example combines two ellipses (one yellow and one white).

The following is the SVG code:

Example

Try it Yourself »

Click to view:View SVG file。

Other Extensions