W3docs
it
Accedi

SVG Ellipse

In questa pagina trovi informazioni sull'elemento SVG <ellipse>, impara a creare un'ellisse e scopri esempi pratici e interessanti.

Cos'è l'elemento SVG <ellipse>?

L'elemento SVG <ellipse> disegna un'ellisse — una forma ovale, come un "cerchio allungato". Lo si posiziona tramite il suo centro (cx, cy) e si specificano due raggi: rx per il raggio orizzontale e ry per il raggio verticale.

Questa è la differenza fondamentale rispetto all'elemento <circle>. Un cerchio ha un unico raggio (r) perché è ugualmente largo in tutte le direzioni. Un'ellisse necessita di due raggi perché è più larga in una direzione rispetto all'altra:

  • Usa <circle> quando la forma è perfettamente tonda.
  • Usa <ellipse> quando hai bisogno di un ovale, o quando rx e ry devono essere diversi.

Se imposti rx uguale a ry, l'ellisse viene visualizzata come un cerchio.

Il sistema di coordinate SVG

Come ogni forma SVG, un'ellisse è posizionata sulla tela SVG, dove l'origine (0, 0) si trova nell'angolo in alto a sinistra. L'asse x cresce verso destra e l'asse y cresce verso il basso. Quindi cx="230" cy="120" posiziona il centro dell'ellisse a 230 unità dal bordo sinistro e 120 unità dall'alto. Consulta il capitolo sul tag <svg> per maggiori informazioni sul sistema di coordinate e sul viewport.

Informazione

L'elemento <ellipse> non ha un attributo per l'orientamento, quindi i suoi assi rx/ry sono sempre orizzontale e verticale. Per inclinare un'ellisse, ruotala con l'attributo transform (mostrato di seguito).

Esempio dell'elemento SVG <ellipse>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Provalo tu stesso »

Nel codice sopra, cx="230" e cy="120" impostano il centro, rx="150" rende l'ellisse larga 300 unità e ry="70" la rende alta 140 unità. L'attributo style la colora di rosa e le conferisce un contorno azzurro di 5 unità.

Esempio dell'elemento SVG <ellipse> per creare due ellissi sovrapposte:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="400" height="200">
      <ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
      <ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
      Sorry,inline SVG isn't supported by your browser. 
    </svg>
  </body>
</html>
Provalo tu stesso »

Puoi aggiungere tutte le ellissi che vuoi con colori e dimensioni diversi.

Esempio dell'elemento SVG <ellipse> per combinare due ellissi:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="150" >
      <ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
      <ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Provalo tu stesso »

Esempio di rotazione e stilizzazione di un <ellipse>:

Poiché <ellipse> non ha un attributo di orientamento, lo si inclina tramite l'attributo transform="rotate(...)". I primi due numeri passati a rotate() dopo l'angolo sono il punto centrale attorno a cui ruotare — in questo caso il centro dell'ellisse stessa, in modo che ruoti sul posto. Questo esempio utilizza anche opacity e un contorno tratteggiato tramite stroke-dasharray:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Il valore rotate(-25 200 100) ruota l'ellisse di 25 gradi in senso antiorario attorno al punto (200, 100), opacity:0.7 la rende leggermente trasparente e stroke-dasharray:10,6 disegna il contorno come tratti da 10 unità separati da spazi di 6 unità.

Attributi

AttributoDescrizione
cxLa coordinata x del centro dell'ellisse.
cyLa coordinata y del centro dell'ellisse.
rxIl raggio orizzontale (lungo l'asse x).
ryIl raggio verticale (lungo l'asse y).
pathLengthLa lunghezza totale del percorso, in unità utente.

L'elemento SVG <ellipse> supporta anche gli Attributi Globali e gli Attributi di Evento.

Capitoli correlati

  • SVG <circle> — la controparte rotonda, che utilizza un unico raggio r.
  • Tag SVG HTML — il contenitore <svg>, il viewport e il sistema di coordinate.

Esercitazione

Pratica
Quali attributi impostano i due raggi di un'ellisse SVG?
Quali attributi impostano i due raggi di un'ellisse SVG?
Was this page helpful?