SVG <ellisse>
Ellisse SVG - <ellisse>
L'elemento <ellipse> viene utilizzato per creare un'ellisse.
Un'ellisse è strettamente correlata a un cerchio. La differenza è che un'ellisse ha un raggio x e ay che differiscono l'uno dall'altro, mentre un cerchio ha raggio xey uguale:
Esempio 1
L'esempio seguente crea un'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>
Spiegazione del codice:
- L'attributo cx definisce la coordinata x del centro dell'ellisse
- L'attributo cy definisce la coordinata y del centro dell'ellisse
- L'attributo rx definisce il raggio orizzontale
- L'attributo ry definisce il raggio verticale
Esempio 2
L'esempio seguente crea tre ellissi una sopra l'altra:
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>
Esempio 3
L'esempio seguente combina due ellissi (una gialla e una bianca):
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>