Tech and Media Labs
This site uses cookies to improve the user experience.




SVG ellipse element

Jakob Jenkov
Last update: 2014-08-19

The SVG <ellipse> element is used to draw ellipses. An ellipse is a circle that does not have equal height and width. Its radius in the x and y directions are different, in other words.

Video Version

If you prefer to watch this tutorial as video, here is a screencast:

SVG ellipse Example

Here is an SVG ellipse example:

<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:#006600; fill:#00cc00"/>

</svg>

Here is the resulting image:

The ellipse is centered in cx , cy like the circle. But the radius in the x and y directions are specified by two attributes, not one: The rx and ry attributes. As you can see, the rx attribute has a higher value than the ry attribute, making the ellipse wider than it is tall. Setting the rx and ry attributes the same number would result in a regular circle.

stroke-width

You can set the width of the stroke of the ellipse using the stroke-width style property. Here is an example:

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

Here is how the resulting ellipse looks when rendered:

stroke-dasharray

You can make the stroke of an ellipse dashed using the stroke-dasharray style property. Here is an example:

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               stroke-dasharray: 10 5;
               fill: none;
        "/>

This example sets a dash width of 10, and a dash space (space between dashes) of 5. Here is how the ellipse looks when rendered:

stroke-opacity

You can make the stroke of an SVG ellipse semi transparent using the stroke-opacity style property. Here is an example:

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

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

Here is how these SVG ellipses look when rendered:

Notice how the second (blue) ellipse is transparent and how you can see the red ellipse through its stroke.

fill

The fill style property is used to set how the ellipse is to be filled. Here is an example:

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

Here is how this SVG ellipse look when rendered:

fill-opacity

The fill-opacity style property can be used to set the opacity (transparency) of the fill color of an ellipse. Here is an example:

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

<ellipse cx="60" cy="60" rx="40" ry="30"
         style="stroke: none;
               fill: #0000ff;
               fill-opacity: 0.5;
        "/>

Here is how these ellipses look when rendered:

Notice how the second (blue) ellipse is semi-transparent, making the red ellipse visible through it.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC