HTML and CSS Reference
In-Depth Information
Figura 10.8
- Torta con gradienti radiali applicati a ogni fetta.
Oltre ai gradienti abbiamo, poi, la possibilità di creare
pattern
, cioè matrici di porzioni
di SVG da utilizzare come colori di riempimento. Si definiscono anch'essi nella sezione
defs
e possono contenere qualsiasi shape, gruppo o immagine.
Nell'esempio 10.13
possiamo vedere come definire due pattern, uno basato su uno sha-
pe e l'altro basato su un'immagine.
Esempio 10.13
<defs>
<pattern id="blueg" x="0" y="0" width="4" height="4"
patternUnits="userSpaceOnUse">
<circle fill="blue" cx="2" cy="2" r="2" />
</pattern>
<pattern id="redg" x="0" y="0" width="200" height="133"
patternUnits="userSpaceOnUse">
<image xlink:href="crop.jpg" width="200" height="133" />
</pattern>
</defs>
I pattern richiedono di specificare la dimensione della matrice di riempimento, perché ogni
pattern deve adattarsi e ripetersi, così da riempire tutto l'oggetto in cui è applicato come
sfondo. Se li applichiamo alla torta creata in precedenza, infatti, l'immagine viene duplica-
ta, così come il cerchio blu.
Figura 10.9
- Una torta in SVG con riempimenti basati su pattern.
Ora che abbiamo descritto le funzionalità avanzate di riempimento, possiamo vedere cosa
SVG offre per allineare e trasformare gli elementi.
