Die fillEigenschaft in CSS dient zum Ausfüllen der Farbe einer SVG-Form.
.eyeball ( fill: red; )Merken:
- Dadurch wird ein Präsentationsattribut überschrieben
- Dies überschreibt keinen Inline-Stil, z
Werte
Die fillEigenschaft kann jeden CSS-Farbwert akzeptieren.
- Benannte Farben -
orange - Hex Farben -
#FF9E2C - RGB- und RGBa-Farben -
rgb(255, 158, 44)undrgba(255, 158, 44, .5) - HSL- und HSLa-Farben -
hsl(32, 100%, 59%)undhsla(32, 100%, 59%, .5)
Akzeptiert als Bonus fillauch die Muster von SVG-Formen, die innerhalb eines defsElements definiert sind :
.module ( fill: url(#pattern); )Siehe die Pen Fill-Eigenschaft von CSS-Tricks (@ css-Tricks) auf CodePen.
Ein Anwendungsfall
Ein häufiger Anwendungsfall für fillist das Ändern der Farbe eines SVG beim Schweben, ähnlich wie colorbeim Stylen von Link-Hovers.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Siehe die Pen Fill-Eigenschaft von CSS-Tricks (@ css-Tricks) auf CodePen.
Ein weiterer Anwendungsfall
Die fillEigenschaft ist einer von vielen Gründen, warum SVG eine viel flexiblere Option als typische Bilddateien ist. Nehmen wir als Beispiel Symbole.
Möglicherweise haben wir die gleichen Symbole, jedoch in zwei verschiedenen Farbschemata. Bei typischen Bilddateien (wie JPG.webp, PNG und GIF) müssen wir zwei Versionen jedes Symbols erstellen - eine für jedes Farbschema.
Mit SVG hingegen können wir die Symbole mithilfe der CSS- fillEigenschaft malen :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Jetzt können wir dieselbe SVG-Datei für mehrere Szenarien wiederverwenden, indem wir den Klassennamen des Pfads oder der Form ändern:
Siehe die Pen Fill-Eigenschaft von CSS-Tricks (@ css-Tricks) auf CodePen.
Mehr Informationen
- SVG 1.1 Spec
- MDN für Füllungen und Striche
- Kaskadierende SVG-Füllfarbe
- SVG-Füllmuster von Jacob Jenkov
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |