fillĪpašums CSS ir aizpildot krāsai SVG formu.
.eyeball ( fill: red; )Atcerieties:
- Tas būs ignorēt prezentācijas atribūtu
- Tas nebūs ignorēt inline stila piemēram
Vērtības
fillĪpašums var pieņemt jebkuru CSS krāsas vērtību.
- Nosauktās krāsas -
orange - Hex krāsas -
#FF9E2C - RGB un RGBa krāsas -
rgb(255, 158, 44)unrgba(255, 158, 44, .5) - HSL un HSLa krāsas -
hsl(32, 100%, 59%)unhsla(32, 100%, 59%, .5)
Kā bonuss fillpieņem arī SVG formu modeļus, kas definēti defselementa iekšpusē :
.module ( fill: url(#pattern); )Vietnē CodePen skatiet CSS-Tricks rekvizītu Pildspalvas aizpildīšana (@ css-tricks).
Lietošanas gadījums
Parasti lietots gadījums fillir svārstīgas SVG krāsas maiņa, līdzīgi kā mēs to darām color, veidojot saites.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Vietnē CodePen skatiet CSS-Tricks rekvizītu Pildspalvas aizpildīšana (@ css-tricks).
Vēl viens lietošanas gadījums
fillĪpašums ir viens no daudzajiem iemesliem, SVG ir daudz elastīgāks risinājums nekā tipisku attēlu failus. Kā piemēru ņemsim ikonas.
Mums, iespējams, ir viens un tas pats ikonu komplekts, bet divās dažādās krāsu shēmās. Tipiskiem attēlu failiem (piemēram, JPG.webp, PNG un GIF) mums būtu jāizveido divas katras ikonas versijas - viena katrai krāsu shēmai.
Savukārt SVG ļauj mums krāsot ikonas, izmantojot CSS fillrekvizītu:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Tagad mēs varam atkārtoti izmantot to pašu SVG failu vairākiem scenārijiem, mainot ceļa vai formas klases nosaukumu:
Vietnē CodePen skatiet CSS-Tricks rekvizītu Pildspalvas aizpildīšana (@ css-tricks).
Vairāk informācijas
- SVG 1.1 Spec
- MDN par aizpildījumiem un insultiem
- Kaskādes SVG aizpildījuma krāsa
- Jēkaba Jenkova SVG aizpildīšanas raksti
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Jā | Jā | Jā | Jā | 9+ | 4.4+ | Jā |