Den fillejendom i CSS er til udfyldning af farven på en SVG form.
.eyeball ( fill: red; )Husk:
- Dette vil tilsidesætte en præsentation attribut
- Dette tilsidesætter ikke en indbygget stil, f.eks
Værdier
Den fillegenskab kan acceptere nogen CSS farveværdi.
- Navngivne farver -
orange - Hex farver -
#FF9E2C - RGB og RGBa farver -
rgb(255, 158, 44)ogrgba(255, 158, 44, .5) - HSL og HSLa farver -
hsl(32, 100%, 59%)oghsla(32, 100%, 59%, .5)
Som en bonus fillaccepterer også mønstre af SVG-figurer, der er defineret inde i et defselement:
.module ( fill: url(#pattern); )Se egenskaben Penfyld ved CSS-Tricks (@ css-tricks) på CodePen.
En brugssag
En almindelig brugssag til filler at ændre farven på en SVG på svæver, ligesom vi gør med, colornår stylinglink svæver.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Se egenskaben Penfyld ved CSS-Tricks (@ css-tricks) på CodePen.
En anden brugssag
Den fillejendom er en af mange grunde SVG er en langt mere fleksibel løsning end typiske billedfiler. Lad os tage ikoner som et eksempel.
Vi har muligvis det samme sæt ikoner, men i to forskellige farveskemaer. Typiske billedfiler (såsom JPG.webp, PNG og GIF) kræver, at vi laver to versioner af hvert ikon - en til hvert farveskema.
SVG tillader os på den anden side at male ikonerne ved brug af CSS- fillegenskaben:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nu kan vi genbruge den samme SVG-fil til flere scenarier ved at ændre klassens navn på stien eller formen:
Se egenskaben Penfyld ved CSS-Tricks (@ css-tricks) på CodePen.
Mere information
- SVG 1.1 Spec
- MDN om fyld og slagtilfælde
- Cascading SVG Fill Color
- SVG Fill Patterns af Jacob Jenkov
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |