SVG <ellipse> Draw Ellipse

The SVG <ellipse> element is used to draw ellipses. An ellipse is a circle with unequal height and width. In other words, its radii in the x and y directions are different.

SVG ellipse example

This is an example of drawing an ellipse:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15
　　　　　　　　　　　style="stroke:#00"6600; fill:#00cc00"/>
</svg>

The result after running is as follows:

The cx, cy of the ellipse are centered like a circle. However, the radius in the x and y directions is specified by two properties (not one), rx and ry properties. As you can see, the rx property has a higher value than the ry property, making the ellipse wider than its height. Setting the rx and ry properties to the same number will generate a circle.

stroke-Border width setting

You can use the style attribute stroke-width sets the ellipse border width. Example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;fill: none;"/>
</svg>

The resulting image after running is as follows:

Dashed border ellipse

You can also use the style attribute stroke-dasharray makes the ellipse strokes dashed.:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill: none;"/>
</svg>

In this example, the dashed line width is set to10, the space between the dashed lines (the distance between the dashes) is set to5. This is the appearance when rendering the ellipse:

Transparent border

You can use the style attribute stroke-Opacity makes the SVG ellipse border semi-transparent.

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　stroke-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
</svg>

The SVG ellipse effect after the code runs is as follows:

Note that the second (blue) ellipse is transparent, and how the red ellipse can be seen through its strokes.

Ellipse fill

You can use the fill style attribute to fill the ellipse:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

The appearance of the SVG ellipse after running is as follows:

Fill with opacity

fill-The opacity style property can be used to set the opacity (transparency) of an ellipse's fill color:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: none;/ellipse>
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;></ellipse>
</svg>

The appearance of the ellipse during rendering is as follows:

Note that the second (blue) ellipse is semi-transparent, making the red ellipse visible.