SVG Ellipse

Example 1

##lt;ellipse> element is used to create an ellipse:

An ellipse is very similar to a circle. The difference is that ellipses have different x and y radii, while circles have the same x and y radii:

Here is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

For Opera users: View the SVG file (right-click on the SVG Graphic preview source).

Code analysis:

#The x coordinate of the ellipse center defined by the CX attribute
CY attribute The y-coordinate of the defined ellipse center
The horizontal radius defined by the RX attribute
The vertical radius defined by the RY attribute

Example 2

The following example creates three stacked ovals:

The following is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

For Opera users: View SVG File (right click on the SVG graphic preview source).

Example 3

The following example combines two ovals (one yellow and one white):

The following is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

For Opera users: View SVG files (right-click on the SVG graphic preview source).

← SVG circle

SVG straight line →

SVG Ellipse

Example 1

php.cn