SVG <ellips>
SVG-ellips - <ellips>
Die <ellips> element word gebruik om 'n ellips te skep.
'n Ellips is nou verwant aan 'n sirkel. Die verskil is dat 'n ellips 'n x- en ay-radius het wat van mekaar verskil, terwyl 'n sirkel gelyke x- en y-radius het:
Voorbeeld 1
Die volgende voorbeeld skep 'n ellips:
Hier is die SVG-kode:
Voorbeeld
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Kode verduideliking:
- Die cx-kenmerk definieer die x-koördinaat van die middelpunt van die ellips
- Die cy-kenmerk definieer die y-koördinaat van die middelpunt van die ellips
- Die rx-kenmerk definieer die horisontale radius
- Die ry-kenmerk definieer die vertikale radius
Voorbeeld 2
Die volgende voorbeeld skep drie ellipse bo-op mekaar:
Hier is die SVG-kode:
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
Die volgende voorbeeld kombineer twee ellipse (een geel en een wit):
Hier is die SVG-kode:
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>