Stili CSS SVG

Possiamo impostare lo stile delle forme SVG utilizzando CSS. Lo stile si riferisce al cambiamento dell'aspetto della forma. Questo può essere il colore e la larghezza del tratto, il colore di riempimento, l'opacità e molte altre proprietà della forma.

Ci sono 6 stili disponibili per impostare la forma delle immagini SVG. Ogni stile sarà introdotto in questo articolo. Alla fine di questo articolo, troverai una lista delle proprietà CSS che possono essere utilizzate con SVG.

Utilizzo delle proprietà di stile CSS

È possibile utilizzare attributi di stile specifici (ad esempio, stroke e fill) per stilizzare le forme SVG. Ecco un esempio:

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

Sebbene ci siano una serie di attributi di stile disponibili. Tuttavia, si consiglia di utilizzare una tabella di stili inline o esterna, quindi non illustrerò ulteriormente gli attributi di stile.

Utilizzo dell'attributo style e delle proprietà CSS

Questo metodo non utilizza alcun attributo di stile specifico. Invece, utilizza solo l'attributo style e lo specifica all'interno di esso. Se hai bisogno di inserire direttamente lo stile, questo metodo è preferibile rispetto agli attributi specifici, perché puoi imparare i nomi delle proprietà CSS. Le proprietà CSS nelle tabelle di stili interne o esterne sono le stesse, quindi copiare e incollare e imparare questo tipo di contenuto è più facile.

Questo è un cerchio che imposta contorno e riempimento utilizzando l'attributo style e le proprietà CSS:

<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: #000000; fill:#00ff00;" /></svg>

Utilizzo della tabella di stili inline

Puoi definire lo stile delle forme in una tabella di stili incorporata e applicare automaticamente tutti questi stili alle forme. Ecco un esempio:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle cx="40" cy="40" r="24"/>
</svg>

Nota come vengono definiti gli stili per l'elemento circle all'interno dell'elemento <style>. Funziona allo stesso modo in HTML e CSS.

La tabella di stili interna funziona correttamente sia in Internet Explorer 7 che in Firefox 3.0.5.

Ecco l'effetto:

Attributo class

Puoi utilizzare l'attributo class per applicare lo stile a una forma specifica, piuttosto che applicare lo stile a tutti gli elementi di un tipo specifico (ad esempio, tutti i cerchi). Come si usa l'attributo class negli elementi HTML.

Questo è un esempio di due cerchi in stile - verde e rosso. <circle> Utilizza i seguenti attributi class per applicare ciascun stile agli elementi rispettivi :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40"　cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40"　cy="100"　r="24"/>
</svg>

Nota: il nome del selettore nell'stylesheet, come .myGreen e .myRed, viene applicato al circle. Ora, l'elemento <circle> può essere definito con class="myGreen" per definire lo stile verde o class="myRed" per definire lo stile rosso del cerchio.

Usare uno stylesheet esterno

Quando si utilizza uno stylesheet esterno, lo stylesheet viene messo in un file separato e poi posizionato sul server web, proprio come un file CSS esterno della pagina HTML. Inoltre, prima dell'elemento <svg>, è necessario includere nella pagina SVG la seguente dichiarazione:

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>

Questa direttiva di processing indica all'interprete SVG di utilizzare lo stylesheet CSS per trovare il file “svg-stylesheet.css”.

Questo è un esempio di dichiarazione utilizzata all'interno di un file SVG:

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>
<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>

Attenzione: gli stylesheet CSS esterni sembrano funzionare correttamente in Internet Explorer 7, ma non in Firefox 3.0.5.

Usare uno stylesheet in una pagina HTML.

Se l'immagine SVG viene integrata in una pagina HTML, è possibile anche includere lo stylesheet dell'immagine SVG nella pagina HTML. Ecco un esempio:

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

Per aggiungere stili a forme all'interno di un'immagine SVG, è sufficiente aggiungere attributi CSS standard all'elemento style. Puoi usare i selettori CSS abituali utilizzati in HTML per impostare lo stile degli elementi SVG. Questo è un esempio di pagina HTML, in cui l'elemento circle è configurato con uno stile da un foglio di stile CSS nella pagina HTML:

<html>
<body>
<style>
　　circle {
　　　　　stroke: #006600;
　　　　　fill : #00cc00;
　　}
</style>
<svg>
　　<circle cx="40" cy="40" r="24" />
</svg>
</body>
</html>

Se l'immagine SVG viene direttamente incorporata nella pagina HTML, questo potrebbe essere il metodo più semplice per impostare lo stile delle forme SVG.

Sovrascrittura del foglio di stile locale nella forma

Se lo stile è già stato impostato nel foglio di stile, è possibile sovrascrivere questo stile impostando un nuovo attributo di stile locale all'interno della forma che si desidera stilizzare. Gli stili impostati localmente all'interno della forma hanno sempre la precedenza sugli stili definiti nei fogli di stile interni o esterni.

Proprietà CSS SVG

Gli elementi SVG hanno le seguenti proprietà CSS che possono essere impostate. Non tutti gli elementi hanno tutte queste proprietà. Pertanto, le proprietà CSS sono suddivise in più tabelle per diversi elementi.

Proprietà CSS delle forme

Proprietà CSS dell'elemento path e degli altri elementi di forma:

Proprietà CSS del testo

Proprietà CSS del elemento text:

Proprietà CSS del Gradiente

Proprietà CSS del Gradiente SVG: