La fillproprietà in CSS serve per riempire il colore di una forma SVG.
.eyeball ( fill: red; )Ricorda:
- Questo sarà sovrascrivere un attributo di presentazione
- Questo non sovrascriverà uno stile in linea ad es
Valori
La fillproprietà può accettare qualsiasi valore di colore CSS.
- Colori nominati -
orange - Colori esadecimali -
#FF9E2C - Colori RGB e RGBa -
rgb(255, 158, 44)ergba(255, 158, 44, .5) - Colori HSL e HSLa -
hsl(32, 100%, 59%)ehsla(32, 100%, 59%, .5)
Come bonus, fillaccetta anche i modelli di forme SVG che sono definiti all'interno di un defselemento:
.module ( fill: url(#pattern); )Vedi la proprietà Riempimento penna di CSS-Tricks (@ css-tricks) su CodePen.
Un caso d'uso
Un caso d'uso comune per fillè cambiare il colore di un SVG al passaggio del mouse, proprio come facciamo colorquando si posiziona il collegamento di stile.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Vedi la proprietà Riempimento penna di CSS-Tricks (@ css-tricks) su CodePen.
Un altro caso d'uso
La fillproprietà è uno dei tanti motivi per cui SVG è un'opzione molto più flessibile rispetto ai tipici file di immagine. Prendiamo le icone, come esempio.
Potremmo avere lo stesso set di icone ma in due diverse combinazioni di colori. I file di immagine tipici (come JPG.webp, PNG e GIF) richiederebbero di creare due versioni di ciascuna icona, una per ogni combinazione di colori.
SVG, d'altra parte, ci permette di dipingere le icone utilizzando la fillproprietà CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Ora possiamo riutilizzare lo stesso file SVG per più scenari modificando il nome della classe del percorso o della forma:
Vedi la proprietà Riempimento penna di CSS-Tricks (@ css-tricks) su CodePen.
Maggiori informazioni
- Specifiche SVG 1.1
- MDN su riempimenti e tratti
- Colore riempimento SVG a cascata
- Motivi di riempimento SVG di Jacob Jenkov
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| sì | sì | sì | sì | 9+ | 4.4+ | sì |