A fillCSS-ben található tulajdonság SVG alakzat színének kitöltésére szolgál.
.eyeball ( fill: red; )Emlékezik:
- Ez lesz felülírja a bemutató attribútum
- Ez nem fogja felülírni az inline stílust, pl
Értékek
A filltulajdon bármely CSS színértéket elfogadhat.
- Nevezett színek -
orange - Hex színek -
#FF9E2C - RGB és RGBa színek -
rgb(255, 158, 44)ésrgba(255, 158, 44, .5) - HSL és HSLa színek -
hsl(32, 100%, 59%)éshsla(32, 100%, 59%, .5)
Bónuszként fillelfogadja az SVG alakzatok mintáit is, amelyek egy defselem belsejében vannak meghatározva :
.module ( fill: url(#pattern); )Lásd a CSS-Tricks Pen @ tulajdonságát (@ css-tricks) a CodePen-en.
A használati eset
Gyakori eset az fillSVG színének megváltoztatása az egérmutatón, hasonlóan ahhoz, mint a colorlinkek lebegésének stílusakor.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Lásd a CSS-Tricks Pen @ tulajdonságát (@ css-tricks) a CodePen-en.
Egy másik felhasználási eset
A filltulajdonság az egyik oka annak, hogy az SVG sokkal rugalmasabb lehetőség, mint a tipikus képfájlok. Vegyünk példaként ikonokat.
Lehet, hogy ugyanazok az ikonkészletek vannak, de két különböző színvilágban. A tipikus képfájlok (például JPG.webp, PNG és GIF) megkívánják, hogy az ikonokból két verziót készítsünk - mindegyik színvilághoz egyet.
Az SVG viszont lehetővé teszi számunkra az ikonok festését a CSS filltulajdonság használatakor:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Most ugyanazt az SVG fájlt felhasználhatjuk több forgatókönyvhöz az útvonal vagy alakzat osztálynevének megváltoztatásával:
Lásd a CSS-Tricks Pen @ tulajdonságát (@ css-tricks) a CodePen-en.
Több információ
- SVG 1.1 Spec
- MDN a kitöltésekről és agyvérzésekről
- Lépcsőzetes SVG kitöltőszín
- Jacob Jenkov SVG kitöltési mintái
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Igen | Igen | Igen | Igen | 9+ | 4.4+ | Igen |