Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Proprietà e selettori CSS, assegnare gli stili all'SVG

Assegnare gli stili agli elementi SVG, sia attraverso gli attributi sia utilizzando i CSS.
Assegnare gli stili agli elementi SVG, sia attraverso gli attributi sia utilizzando i CSS.
Link copiato negli appunti

Vi sono diverse modalità di assegnazione degli stili, la prima delle quali non prevede il ricorso alle proprietà CSS, ma ad attributi SVG. Un quadrato di 100px di lato, ad esempio, può essere definito come segue:

<rect
	width="100"
	height="100"
	x="10"
	y="10"
	class="square"
	fill="#cd3512"
	fill-opacity="1"
	stroke="#000000"
	stroke-width="4"
	stroke-opacity="1" />

All'interno della gerarchia CSS, gli attributi grafici SVG sono collocati al livello più basso, subito al di sotto dei fogli di stile esterni. I fogli di stile interni al documento e le dichiarazioni inline hanno, invece, un livello gerarchico (cascade) superiore.

Gli attributi grafici degli SVG si collocano ad un livello basso della gerarchia dei fogli di stile

Cascade

Lo stesso quadrato dell'esempio precedente può essere definito graficamente grazie a dichiarazioni CSS. Come anticipato, una prima modalità di assegnazione degli stili prevede il ricorso all'attributo style:

<rect
	width="100"
	height="100"
	x="120"
	y="10"
	style="fill:#cd3512;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-opacity:1" />

Qui le proprietà CSS corrispondono esattamente agli attributi dell'elemento SVG.
E tuttavia non vi è sempre corrispondenza tra attributi SVG e proprietà CSS: non esistono, ad esempio, proprietà che consentano di definire la posizione (attributi x e y) e le dimensioni (width e height) degli elementi.

Esattamente come avviene per i documenti HTML, anche nei documenti SVG i selettori CSS permettono di puntare agli elementi con classi o id. Lo stesso quadrato dell'esempio precedente, infatti, può essere generato dal codice che segue:

<style>
<![CDATA[
.square{
	fill: #cd3512;
	fill-opacity: 1;
	stroke: #000000;
	stroke-width: 4;
	stroke-opacity: 1;
}
]]>
</style>
<rect
	width="100"
	height="100"
	x="230"
	y="10"
	class="square" />

Come già detto nella prima parte della guida, l'elemento img non permette di assegnare stili agli oggetti SVG tramite selettori CSS. Tutti gli altri elementi – ossia object, embed e iframe – vengono, invece, visualizzati correttamente.

L'elemento img non permette di assegnare stili agli oggetti SVG tramite selettori CSS

Elemento img

Si faccia attenzione a collocare le dichiarazioni CSS nello stesso documento in cui vengono definiti gli elementi SVG, e non nel documento HTML in cui questi ultimi vengono inclusi. Se si dovesse preferire includere i fogli di stile nel documento HTML, allora diventa necessario inserire oggetti gli SVG in modalità inline nel documento principale.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 template</title>
<style>
.square{
	fill: #cd3512;
	fill-opacity: 1;
	stroke: #000000;
	stroke-width: 4;
	stroke-opacity: 1;
}
</style>
</head>
<body>
<!-- in un documento HTML5 la proprietà xmlns non è necessaria -->
<svg width="600px" height="200px">
	<rect width="100" height="100" x="230" y="20" class="square" />
</svg>
</body>
</html>

Gli oggetti possono essere raggruppati all'interno di un elemento g, in modo che condividano le stesse proprietà grafiche:

<g style="fill: #cd3512; fill-opacity: 1; stroke: #000000; stroke-width: 4; stroke-opacity: 1">
	<rect
		width="100"
		height="100"
		x="120"
		y="10" />
	<circle
		cx="60"
		cy="60"
		r="50" />
</g>

Il risultato è mostrato nell'immagine che segue.

SVG group

Le proprietà

Le proprietà CSS degli oggetti SVG sono sostanzialmente diverse dalle proprietà degli elementi HTML e vengono raggruppate, in base alla funzione, in:

  1. Proprietà visive, che definiscono l'aspetto prettamente grafico di un elemento: colore di sfondo, colore e spessore delle linee, stili delle linee;
  2. Proprietà del testo, come tipo, stile e dimensione del carattere;
  3. Proprietà che influenzano la resa grafica, come l'area di ritaglio, le maschere o i filtri.

La documentazione del W3C fornisce l'elenco completo delle proprietà SVG1 ed SVG2, suddivise per tipologia (font, testo, proprietà visive, ecc.).

I selettori

Per puntare agli SVG, oltre ai selettori di elementi, di classe e di id, si possono utilizzare la maggior parte dei selettori CSS, come le pseudo-classi dinamiche :hover, :active e :focus e tutte le pseudo-classi disponibili in CSS2.

Nell'esempio che segue, si sfrutta la pseudo-classe :hover per cambiare i colori di un cerchio al passaggio del mouse:

<style>
circle{
	fill: #cd3512;
	stroke: #000000;
	stroke-width: 4;
}
circle:hover{
	fill: #FF0000;
	stroke: #0000FF;
}
</style>
<circle
	cx="60"
	cy="60"
	r="50" />

Ma non è tutto. SVG può sfruttare le funzionalità più recenti di CSS3, come le animazioni, le transizioni e le trasformazioni.

Ti consigliamo anche