Den filleiendom i CSS er for utfylling av fargen på en SVG form.
.eyeball ( fill: red; )Huske:
- Dette vil overstyre en presentasjon attributt
- Dette overstyrer ikke en innebygd stil, f.eks
Verdier
Den fillegenskapen kan akseptere noe CSS fargeverdi.
- Navngitte farger -
orange - Hex farger -
#FF9E2C - RGB og RGBa farger -
rgb(255, 158, 44)ogrgba(255, 158, 44, .5) - HSL og HSLa farger -
hsl(32, 100%, 59%)oghsla(32, 100%, 59%, .5)
Som en bonus, fillgodtar også mønstrene til SVG-figurer som er definert inne i et defselement:
.module ( fill: url(#pattern); )Se pennfyllingsegenskapen av CSS-Tricks (@ css-tricks) på CodePen.
En brukssak
En vanlig brukssak for filler å endre fargen på en SVG på sveve, omtrent som vi gjør colornår stylinglenker svever.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Se pennfyllingsegenskapen av CSS-Tricks (@ css-tricks) på CodePen.
Nok en brukssak
Den fillegenskapen er en av mange grunner til SVG er et mye mer fleksibelt alternativ enn vanlige bildefiler. La oss ta ikoner, som et eksempel.
Vi kan ha samme sett med ikoner, men i to forskjellige fargevalg. Typiske bildefiler (som JPG.webp, PNG og GIF) vil kreve at vi lager to versjoner av hvert ikon - en for hvert fargevalg.
SVG, derimot, lar oss male ikonene når vi bruker CSS- fillegenskapen:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nå kan vi gjenbruke den samme SVG-filen for flere scenarier ved å endre klassens navn på banen eller formen:
Se pennfyllingsegenskapen av CSS-Tricks (@ css-tricks) på CodePen.
Mer informasjon
- SVG 1.1 spesifikasjon
- MDN om fyll og slag
- Cascading SVG Fill Color
- SVG Fill Patterns av Jacob Jenkov
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |