SVG ellipse element
Jakob Jenkov |
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.
| Tweet | |
Jakob Jenkov | |
