De filleigenschap in CSS is voor het invullen van de kleur van een SVG-vorm.
.eyeball ( fill: red; )Onthouden:
- Dit heeft voorrang op een presentatiekenmerk
- Dit heeft geen voorrang op een inline stijl, bijv
Waarden
De filleigenschap kan elke CSS-kleurwaarde accepteren.
- Benoemde kleuren -
orange - Hex-kleuren -
#FF9E2C - RGB- en RGBa-kleuren -
rgb(255, 158, 44)enrgba(255, 158, 44, .5) - HSL- en HSLa-kleuren -
hsl(32, 100%, 59%)enhsla(32, 100%, 59%, .5)
Als bonus fillaccepteert u ook de patronen van SVG-vormen die in een defselement zijn gedefinieerd :
.module ( fill: url(#pattern); )Zie de eigenschap Penvulling door CSS-Tricks (@ css-tricks) op CodePen.
Een use case
Een veelvoorkomend gebruik fillis het veranderen van de kleur van een SVG bij zweven, net zoals we doen colorbij het stylen van zweefkoppelingen .
.icon ( fill: black; ) .icon:hover ( fill: orange; )Zie de eigenschap Penvulling door CSS-Tricks (@ css-tricks) op CodePen.
Een andere use case
De filleigenschap is een van de vele redenen waarom SVG een veel flexibelere optie is dan typische afbeeldingsbestanden. Laten we als voorbeeld pictogrammen nemen.
We hebben misschien dezelfde set pictogrammen, maar in twee verschillende kleurenschema's. Voor typische afbeeldingsbestanden (zoals JPG.webp, PNG en GIF) zouden we twee versies van elk pictogram moeten maken - één voor elk kleurenschema.
Met SVG, aan de andere kant, kunnen we de pictogrammen schilderen met behulp van de CSS- filleigenschap:
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Nu kunnen we hetzelfde SVG-bestand hergebruiken voor meerdere scenario's door de klassenaam van het pad of de vorm te wijzigen:
Zie de eigenschap Penvulling door CSS-Tricks (@ css-tricks) op CodePen.
Meer informatie
- SVG 1.1-specificatie
- MDN op Fills en Strokes
- Trapsgewijze SVG-opvulkleur
- SVG-vulpatronen door Jacob Jenkov
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |