fillNekretnina u CSS je za punjenje u boji oblik SVG.
.eyeball ( fill: red; )Zapamtiti:
- Ovo će poništiti atribut prezentacije
- To neće nadjačati ugrađeni stil, npr
Vrijednosti
fillImovine može prihvatiti bilo koju vrijednost CSS boje.
- Imenovane boje -
orange - Hex boje -
#FF9E2C - RGB i RGBa boje -
rgb(255, 158, 44)irgba(255, 158, 44, .5) - HSL i HSLa boje -
hsl(32, 100%, 59%)ihsla(32, 100%, 59%, .5)
Kao bonus, fillprihvaća i uzorke SVG oblika koji su definirani unutar defselementa:
.module ( fill: url(#pattern); )Pogledajte svojstvo Pen fill by CSS-Tricks (@ css-tricks) na CodePenu.
Slučaj upotrebe
Uobičajeni slučaj upotrebe fillje promjena boje SVG-a pri lebdenju, slično kao što to činimo colorkod oblikovanja lebdenja veze.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Pogledajte svojstvo Pen fill by CSS-Tricks (@ css-tricks) na CodePenu.
Još jedan slučaj upotrebe
fillImovine je jedan od mnogih razloga SVG je mnogo fleksibilniji opcija od tipičnih slika. Uzmimo za primjer ikone.
Mogli bismo imati isti skup ikona, ali u dvije različite sheme boja. Tipične slikovne datoteke (kao što su JPG.webp, PNG i GIF) zahtijevale bi da napravimo dvije verzije svake ikone - po jednu za svaku shemu boja.
SVG, s druge strane, omogućuje nam bojanje ikona u korištenju fillsvojstva CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Sada istu SVG datoteku možemo prenamijeniti za više scenarija promjenom naziva klase puta ili oblika:
Pogledajte svojstvo Pen fill by CSS-Tricks (@ css-tricks) na CodePenu.
Više informacija
- SVG 1.1 Spec
- MDN o ispunama i potezima
- Kaskadna SVG boja ispune
- Uzorci ispune SVG, Jacob Jenkov
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Da | Da | Da | Da | 9+ | 4,4+ | Da |