Disegnare un Cerchio con SVG <circle>

L'elemento <circle> di SVG è una forma di base di SVG utilizzata per creare cerchi, basati su un centro e un raggio, e può utilizzare stroke e fill per disegnare contorni continui, tratteggiati e riempire i colori dei cerchi.

L'elemento <circle> di SVG viene utilizzato per disegnare cerchi. Ecco un esempio semplice:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24" style="stroke: #006600; fill: #00cc00"/>
</svg>

Ecco l'immagine del risultato dell'esecuzione

Questo cerchio è centrato nei punti cx, cy con un raggio di r. cx, cy e r sono attributi dell'elemento <circle>.

Contorno Circolare

Puoi impostare lo stile di contorno SVG del cerchio utilizzando l'attributo stroke. Nell'esempio iniziale di questa pagina, il tratteggio è impostato su #006600 verde scuro. Ma puoi impostare non solo il colore del tratteggio, ma anche altro. Puoi anche impostare la larghezza del tratteggio utilizzando lo stile di proprietà stroke-width. Ecco un esempio:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　fill:#00cc00"/></svg>

Ecco l'aspetto del cerchio dopo l'esecuzione:

Puoi anche utilizzare l'attributo stroke-dasharray per disegnare il contorno a tratteggio. Ecco un esempio:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #006600;
　　　　　　　　　　　stroke-width: 3;
　　　　　　　　　　　stroke-dasharray: 10 5;
　　　　　　　　　　　fill:#00cc00"/></svg>

Ecco l'aspetto dopo la renderizzazione:

Puoi anche rimuovere il contorno del cerchio (contorno), riempi solo il cerchio con il colore di riempimento. Ecco un esempio di codice:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: none;
　　　　　　　　　　　fill:#00cc00"/></svg>

Ecco l'effetto del cerchio senza contorno dopo l'esecuzione:

Riempimento Cerchio

L'attributo di stile fill controlla il modo di riempimento del cerchio. impostando l'attributo fill a none, puoi scegliere di non riempire affatto.
Esempio di seguito:

Ecco l'aspetto del cerchio senza riempimento:

Puoi impostare il colore di riempimento utilizzando l'attributo fill, come descritto in questo articolo, ecco un esempio di codice:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

L'aspetto di disegnare un cerchio e riempirlo di colore è il seguente:

Puoi anche utilizzare lo stile di proprietà fill-opacity per impostare la riempimento come trasparente. Esempio seguente disegna due cerchi, uno dei quali è parzialmente situato sopra l'altro e semi-trasparente.

<svg height="80px">
　　　　<circle cx="40" cy="40" r="24" style="stroke: #660000;
　　　　　　　　　　　　　　　　　　　fill: #cc0000;
　　　　　　　　　　　　</circle>
　　　　<circle cx="64" cy="40" r="24" style="stroke: #000099;
　　　　　　　　　　　　　　　　　　　fill: #0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity: 0.5;
　　　　　　　　　　　　</circle>
</svg>

Ecco come funziona l'effetto:

Attenzione, il cerchio blu (destra) è ora semi-trasparente all'interno. Per rendere anche la traccia semi-trasparente, è necessario utilizzare lo stile stroke-opacity.