HTML and CSS Reference
In-Depth Information
Figura 10.7 - Riutilizzo di un gruppo mediante l'elemento use.
Colorare con gradienti e pattern
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
usati con gli attributi fill e stroke , sempre tramite XLink, come mostrato nell'esempio
10.11 , che crea un gradient dal grigio al blu.
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.
 
Search WWH ::




Custom Search