HTML and CSS Reference
In-Depth Information
Figura 10.7
- Riutilizzo di un gruppo mediante l'elemento use.
In realtà possiamo usare colori di riempimento più evoluti, tramite gradienti e pattern. At-
traverso gli elementi
linearGradient
e
radialGradient
possiamo definire dei
gradienti lineari o radiali. La loro definizione è molto simile a quella che troverete in altri
linguaggi, perché si basa sugli stop, cioè segnaposti di colore tra i quali effettuare una tran-
sizione.
Come anticipato nel paragrafo precedente, vanno definiti con
defs
per poter essere poi
Esempio 10.11
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="gray" />
<stop offset="1" stop-color="blue" />
</linearGradient>
</defs>
<rect
fill="url(#grad)"
width="50" height="20" />
Gli attributi
x1
,
y1
e
x2
,
y2
indicano il punto di inizio e di fine di un ipotetico rettangolo
1x1 (oppure utilizzando una misura in percentuale) per stabilire la direzione del gradiente.
Nell'esempio 10.11
tracciamo una diagonale tra l'angolo in alto a sinistra e quello in basso
a destra. I tag
stop
definiscono con
offset
il punto con valori da 0 a 1 in cui passare al
nuovo colore rispetto alla diagonale tracciata.
Da notare, inoltre, l'uso della funzione
url
di XLink, utilizzabile, per esempio, anche
nei CSS. Riprendendo
l'esempio 10.6
della torta, possiamo sfruttare il gradiente radiale
per rendere più accattivante il nostro grafico.
Nell'esempio 10.12
definiamo tre gradienti,
ognuno dei quali utilizzato su ogni fetta della torta.