fillNehnuteľnosť v CSS je pre vyplnenie vo farbe tvare SVG.
.eyeball ( fill: red; )Pamätajte:
- To bude prepísať atribút prezentačné
- To nebude prepísať inline štýle napr
Hodnoty
Toto fillubytovacie zariadenie prijíma akékoľvek hodnoty farieb CSS.
- Pomenované farby -
orange - Hex farby -
#FF9E2C - Farby RGB a RGBa -
rgb(255, 158, 44)argba(255, 158, 44, .5) - Farby HSL a HSLa -
hsl(32, 100%, 59%)ahsla(32, 100%, 59%, .5)
Ako bonus fillprijíma aj vzory tvarov SVG, ktoré sú definované vo vnútri defsprvku:
.module ( fill: url(#pattern); )Prezrite si vlastnosť Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Prípad použitia
Bežným prípadom použitia fillje zmena farby SVG pri umiestnení kurzora myši, podobne ako pri zmene colorštýlu pri umiestnení kurzora odkazu.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Prezrite si vlastnosť Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Ďalší prípad použitia
Táto fillvlastnosť je jedným z mnohých dôvodov, prečo je SVG oveľa flexibilnejšia možnosť ako typické obrazové súbory. Zoberme si ako príklad ikony.
Možno máme rovnakú sadu ikon, ale v dvoch rôznych farebných schémach. Typické obrazové súbory (ako JPG.webp, PNG a GIF) by vyžadovali, aby sme vytvorili dve verzie každej ikony - jednu pre každú farebnú schému.
Na druhej strane SVG nám umožňuje maľovať ikony pomocou vlastnosti CSS fill:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Teraz môžeme zmeniť účel toho istého súboru SVG pre viac scenárov zmenou názvu triedy cesty alebo tvaru:
Prezrite si vlastnosť Pen fill by CSS-Tricks (@ css-tricks) na CodePen.
Viac informácií
- SVG 1.1 Spec
- MDN pre výplne a ťahy
- Kaskádová farba výplne SVG
- Vzory výplne SVG od Jacoba Jenkova
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Áno | Áno | Áno | Áno | 9+ | 4,4+ | Áno |