fillHotel v CSS je za polnjenje v barvi obliki SVG.
.eyeball ( fill: red; )Ne pozabite:
- To bo preglasilo atribut predstavitve
- To ne bo preglasilo vrstnega sloga, npr
Vrednote
fillPremoženje lahko sprejme katero koli barvo CSS vrednosti.
- Poimenovane barve -
orange - Šestnajstiške barve -
#FF9E2C - RGB in RGBa barve -
rgb(255, 158, 44)inrgba(255, 158, 44, .5) - Barvi HSL in HSLa -
hsl(32, 100%, 59%)inhsla(32, 100%, 59%, .5)
Kot bonus fillsprejema tudi vzorce oblik SVG, ki so definirani znotraj defselementa:
.module ( fill: url(#pattern); )Oglejte si lastnost Pen fill z CSS-Tricks (@ css-tricks) na CodePen.
Primer uporabe
Pogost primer uporabe fillje spreminjanje barve SVG pri lebdenju, podobno kot colorpri oblikovanju lebdenja povezave.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Oglejte si lastnost Pen fill z CSS-Tricks (@ css-tricks) na CodePen.
Še en primer uporabe
fillLastnina je eden od številnih razlogov, SVG je veliko bolj prilagodljiva možnost od tipičnih slikovnih datotek. Za primer vzemimo ikone.
Morda imamo enak nabor ikon, vendar v dveh različnih barvnih shemah. Tipične slikovne datoteke (na primer JPG.webp, PNG in GIF) bi zahtevale, da izdelamo dve različici vsake ikone - eno za vsako barvno shemo.
SVG pa nam omogoča barvanje ikon pri uporabi filllastnosti CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Zdaj lahko isto datoteko SVG prenamenimo za več scenarijev s spreminjanjem imena razreda poti ali oblike:
Oglejte si lastnost Pen fill z CSS-Tricks (@ css-tricks) na CodePen.
Več informacij
- SVG 1.1 Spec
- MDN za polnila in kapi
- Kaskadna barva polnila SVG
- Vzorci za polnjenje SVG, Jacob Jenkov
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | 9+ | 4,4+ | Da |