Cerchio SVG
In questa pagina trovi informazioni sull'elemento SVG <circle>, impari a creare un cerchio e vedi esempi con i principali attributi.
Descrizione dell'elemento <circle>
L'elemento SVG <circle> disegna un cerchio a partire da un punto centrale e un raggio. Le coordinate del centro del cerchio si impostano con gli attributi cx e cy, mentre il raggio si imposta con l'attributo r.
È una delle forme di base SVG, insieme agli elementi <ellipse>, <rect> e <line>. Usa <circle> ogni volta che hai bisogno di una forma perfettamente rotonda che si ridimensioni senza perdere qualità, poiché SVG è basato su vettori.
Esempio dell'elemento SVG <circle>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Analizziamo il codice precedente:
- Gli attributi
cxecyspecificano le coordinate x e y del centro del cerchio. - L'attributo
rspecifica il raggio del cerchio. - Gli attributi
strokeestroke-widthdisegnano un contorno grigio da 5px, mentrefillcolora l'interno di viola.
L'insidia predefinita di cx/cy: se si omettono cx e cy, entrambi assumono il valore predefinito 0, posizionando il centro nell'angolo in alto a sinistra del canvas SVG. Solo il quarto in basso a destra del cerchio rimane visibile — il resto viene tagliato fuori dal viewport. Imposta sempre cx e cy ad almeno r in modo che l'intero cerchio rientri nell'SVG.
Tecniche avanzate per i cerchi SVG
Sebbene i cerchi SVG di base siano ottimi, esistono molte tecniche avanzate che puoi utilizzare per rendere i tuoi cerchi SVG più accattivanti. Ecco alcuni esempi:
Gradienti
I cerchi SVG possono utilizzare i gradienti per creare una transizione fluida tra i colori. Ecco un esempio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>In questo esempio, abbiamo creato un gradiente che va dal giallo al rosso. Utilizziamo poi l'attributo fill per applicare il gradiente al nostro cerchio.
Ombre
I cerchi SVG possono anche avere ombre per creare profondità e dimensione. Il filtro deve essere definito all'interno di un blocco <defs> (o comunque prima dell'elemento che lo referenzia) affinché il browser possa risolvere il riferimento url(#shadow). Ecco un esempio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="120" height="120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>
</body>
</html>Qui definiamo il filtro dell'ombra in <defs> e lo applichiamo al cerchio con filter="url(#shadow)". La primitiva feDropShadow fa il lavoro: dx e dy spostano l'ombra, stdDeviation controlla la quantità di sfocatura e flood-color imposta il colore dell'ombra. I valori x, y, width e height del filtro ampliano la regione del filtro al 140% in modo che l'ombra sfumata e traslata non venga tagliata ai bordi del riquadro del filtro predefinito.
Animazioni
Infine, i cerchi SVG possono anche essere animati per creare esperienze interattive per i tuoi utenti. Ecco un esempio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>In questo esempio, abbiamo creato un cerchio verde che si sposta quando viene cliccato. Utilizziamo l'elemento <animate> per definire l'animazione e l'attributo attributeName per specificare la proprietà da modificare.
Nota:
<animate>fa parte di SMIL, il cui supporto nei browser è discontinuo ed è stato deprecato in passato in alcuni motori. Per il lavoro in produzione, le animazioni CSS o JavaScript (ad esempio la Web Animations API) sono di solito una scelta più affidabile.
Attributi
L'elemento SVG <circle> supporta anche gli Attributi globali e gli Attributi evento globali.
| Attributo | Descrizione |
|---|---|
| cx | La coordinata sull'asse x del centro del cerchio. Il valore predefinito è 0. |
| cy | La coordinata sull'asse y del centro del cerchio. Il valore predefinito è 0. |
| r | Il raggio del cerchio. Un valore inferiore o uguale a zero disabilita il rendering del cerchio. |
| stroke | Il colore del contorno del cerchio. |
| stroke-width | La larghezza del contorno del cerchio, in unità utente. |
| fill | Il colore utilizzato per riempire l'interno del cerchio. |
| pathLength | Specifica la lunghezza totale del percorso, in unità utente (i nomi degli attributi SVG sono sensibili alle maiuscole). |
I cerchi accettano anche gli attributi di presentazione SVG comuni: fill-opacity e stroke-opacity controllano la trasparenza del riempimento e del contorno, mentre stroke-dasharray trasforma un contorno continuo in uno tratteggiato (ad esempio stroke-dasharray="10 5").
L'elemento <circle> è strettamente correlato alle altre forme di base SVG. Vedi SVG <ellipse> per gli ovali con due raggi indipendenti, e SVG <rect> per i rettangoli e i rettangoli con angoli arrotondati.