SVG Ellisse - <ellisse>
Il <ellipse> elemento viene utilizzato per creare un ellisse.
Un'ellisse è strettamente legato ad un cerchio. La differenza è che un ellisse ha un raggio x ay e che differisce l'una dall'altra, mentre un cerchio ha x uguali e raggio y:
esempio 1
L'esempio seguente crea una ellisse:
Ecco il codice SVG:
Esempio
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Prova tu stesso " Code explanation:
- Il cx attributo definisce la coordinata x del centro dell'ellisse
- Il cy attributo definisce la coordinata y del centro dell'ellisse
- La rx attributo definisce il raggio orizzontale
- Il ry attributo definisce il raggio verticale
esempio 2
L'esempio seguente crea tre ellissi uno sopra l'altro:
Ecco il codice SVG:
Esempio
<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>
Prova tu stesso " esempio 3
L'esempio seguente combina due ellissi (one yellow and one white) :
Ecco il codice SVG:
Esempio
<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>
Prova tu stesso "