fillVara CSS on täites värvi SVG kuju.
.eyeball ( fill: red; )Pidage meeles:
- See on alistada esitlus atribuut
- See ei alista sisemist stiili, nt
Väärtused
fillVara võib aktsepteerida CSS värvi väärtus.
- Nimetatud värvid -
orange - Hex värvid -
#FF9E2C - RGB ja RGBa värvid -
rgb(255, 158, 44)jargba(255, 158, 44, .5) - HSL ja HSLa värvid -
hsl(32, 100%, 59%)jahsla(32, 100%, 59%, .5)
Boonusena fillaktsepteerib ka defselemendi sees määratletud SVG-kujundite mustreid :
.module ( fill: url(#pattern); )Vaadake CodePenil CSS-Tricks atribuuti Pen fill (@ css-tricks).
A Kasutusjuhtum
Tavaline kasutusjuht fillon SVG värvi muutmine hõljumisel, umbes nagu me teeme colorlinkide hõljumise kujundamisel.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Vaadake CodePenil CSS-Tricks atribuuti Pen fill (@ css-tricks).
Teine kasutusjuht
fillVara on üks paljudest põhjustest SVG on palju paindlikumaks kui tüüpiline pildifaile. Võtame näiteks ikoonid.
Meil võib olla sama ikoonide komplekt, kuid kahes erinevas värviskeemis. Tüüpilised pildifailid (näiteks JPG.webp, PNG ja GIF) nõuaksid, et me teeksime igast ikoonist kaks versiooni - ühe iga värvilahenduse jaoks.
Seevastu SVG võimaldab meil CSS-i fillatribuudi kasutamisel ikoone maalida :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nüüd saame sama SVG-faili mitme stsenaariumi jaoks uuesti kasutada, muutes tee või kuju klassi nime:
Vaadake CodePenil CSS-Tricks atribuuti Pen fill (@ css-tricks).
Rohkem informatsiooni
- SVG 1.1 spetsifikatsioon
- MDN täidiste ja insultide kohta
- Kaskaadne SVG täitevärv
- Jacob Jenkovi SVG täitemustrid
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jah | Jah | Jah | Jah | 9+ | 4.4+ | Jah |