SVG <ellips>
SVG-ellips - <ellips>
Het <ellipse>-element wordt gebruikt om een ellips te maken.
Een ellips is nauw verwant aan een cirkel. Het verschil is dat een ellips een x- en ay-straal heeft die van elkaar verschillen, terwijl een cirkel een gelijke x- en y-straal heeft:
voorbeeld 1
In het volgende voorbeeld wordt een ellips gemaakt:
Hier is de SVG-code:
Voorbeeld
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Code uitleg:
- Het cx-attribuut definieert de x-coördinaat van het middelpunt van de ellips
- Het cy-attribuut definieert de y-coördinaat van het middelpunt van de ellips
- Het rx-attribuut definieert de horizontale straal
- Het ry-attribuut definieert de verticale straal
Voorbeeld 2
In het volgende voorbeeld worden drie ellipsen boven elkaar gemaakt:
Hier is de SVG-code:
Voorbeeld
<svg height="150" width="500">
<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>
Voorbeeld 3
In het volgende voorbeeld worden twee ellipsen gecombineerd (een gele en een witte):
Hier is de SVG-code:
Voorbeeld
<svg height="100" width="500">
<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>