Latest web development tutorials

SVG ellisse

SVG ellisse - <ellisse>

esempio 1

lt; ellisse> elemento viene utilizzato per creare un ellisse:

Ovale e rotonda molto simili. Eccetto che l'ellisse ha un diverso raggio di x ed y, e x ed y raggio del cerchio è la stessa:

Ecco il codice SVG:

Esempi

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

Prova »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).

analisi del codice:

  • coordinata x CX attribuisce il centro definito dell'ellisse
  • coordinata y attributo CY definisce il centro dell'ellisse
  • raggio orizzontale definizione di attributo RX
  • raggio verticale definizione di attributo RY

esempio 2

L'esempio seguente crea tre e ammucchiati sul ovale:

Ecco il codice SVG:

Esempi

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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 »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).

esempio 3

L'esempio seguente combina due ellissi (giallo e bianco):

Ecco il codice SVG:

Esempi

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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 »

Per gli utenti di Opera: file in formato SVG vista (tasto destro del mouse sulla grafica anteprima Source SVG).