Disegnare un ellisse con SVG <ellipse>

L'elemento <ellipse> di SVG viene utilizzato per disegnare ellissi. Un ellisse è un cerchio con altezza e larghezza diverse. In altre parole, il suo raggio in direzione x e y è diverso.

Esempio di ellisse SVG

Questo è un esempio di codice per disegnare un'ellisse:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15"
　　　　　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

Il risultato dopo l'esecuzione è il seguente:

cx e cy dell'ellisse sono centrati come un cerchio. Ma il raggio in direzione x e y è specificato da due proprietà (non da una sola): le proprietà rx e ry. Come puoi vedere, l'attributo rx ha un valore maggiore rispetto a quello dell'attributo ry, il che rende l'ellisse più larga della sua altezza. Impostando rx e ry con lo stesso numero, si genera un cerchio.

Impostazione della larghezza del contorno stroke-width

Puoi utilizzare la proprietà di stile stroke-width per impostare la larghezza del contorno dell'ellisse. Esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width: 5;fill: none;"/>
</svg>

L'immagine del risultato dopo l'esecuzione è la seguente:

Ellisse con contorno tratteggiato

Puoi anche utilizzare la proprietà di stile stroke-dasharray per rendere i contorni dell'ellisse a tratteggi.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width: 5;
　　　　　　　　　stroke-dasharray: 10 5;fill: none;"/>
</svg>

In questo esempio, la larghezza della linea tratteggiata è impostata a 10 e lo spazio tra le linee tratteggiate (intervallo tra le linee tratteggiate) è impostato a 5. Questo è l'aspetto durante la rendering dell'ellisse:

Contorno trasparente

Puoi utilizzare la proprietà di stile stroke-opacity per rendere il contorno dell'ellisse SVG semi-trasparente.

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　fill: none;</ellipse>
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　　　　　stroke-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　fill: none;</ellipse>
</svg>

L'effetto dell'ellisse SVG dopo l'esecuzione del codice è il seguente:

Attenzione, la seconda ellisse (blu) è trasparente e come si vede l'ellisse rossa attraverso i contorni.

Riempimento dell'ellisse

Puoi utilizzare la proprietà di stile fill per riempire l'ellisse:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

L'aspetto dell'ellisse SVG dopo l'esecuzione è il seguente:

Riempimento trasparente

La proprietà di stile fill-opacity può essere utilizzata per impostare l'opacità (trasparenza) del colore di riempimento di un ellisse:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width: 5;
　　　　　　　　　　　　　　　fill: none;</ellipse>
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;</ellipse>
</svg>

L'aspetto dell'ellisse durante la rendering è il seguente:

Attenzione, l'ellisse secondaria (blu) è semi-trasparente, rendendo l'ellisse rossa visibile.