Füllen | CSS-Tricks

Die fill-Eigenschaft in CSS dient zum Füllen der Farbe einer SVG-Form.

.eyeball {
  fill: red;
}

Denken Sie daran

Dies wird ein Präsentationsattribut überschreiben <path fill="#fff" ... />
Dies wird nicht einen Inline-Stil überschreiben, z. B. <path style="fill: #fff;" ... />

Werte

Die fill-Eigenschaft kann jeden CSS-Farbwert akzeptieren.

Benannte Farben — orange
Hex-Farben — #FF9E2C
RGB- und RGBa-Farben — rgb(255, 158, 44) und rgba(255, 158, 44, .5)
HSL- und HSLa-Farben — hsl(32, 100%, 59%) und hsla(32, 100%, 59%, .5)

Als Bonus akzeptiert fill auch die Muster von SVG-Formen, die innerhalb eines defs-Elements definiert sind

.module {
  fill: url(#pattern);
}

Siehe den Stift fill property von CSS-Tricks (@css-tricks) auf CodePen.

Ein Anwendungsfall

Ein gängiger Anwendungsfall für fill ist das Ändern der Farbe eines SVG beim Überfahren mit der Maus, ähnlich wie wir color beim Gestalten von Link-Hover-Effekten verwenden.

.icon {
  fill: black;
}

.icon:hover {
  fill: orange;
}

Siehe den Stift fill property von CSS-Tricks (@css-tricks) auf CodePen.

Ein weiterer Anwendungsfall

Die fill-Eigenschaft ist einer von vielen Gründen, warum SVG eine wesentlich flexiblere Option als typische Bilddateien ist. Nehmen wir zum Beispiel Icons.

Wir könnten denselben Satz von Icons haben, aber in zwei verschiedenen Farbschemata. Typische Bilddateien (wie JPG, PNG und GIF) würden uns zwingen, zwei Versionen jedes Icons zu erstellen – eine für jedes Farbschema.

SVG hingegen erlaubt es uns, die Icons mit der CSS-fill-Eigenschaft zu bemalen

.icon {
  fill: black;
}

.icon-secondary {
  fill: orange;
}

Jetzt können wir dieselbe SVG-Datei für mehrere Szenarien wiederverwenden, indem wir den Klassennamen des Pfades oder der Form ändern

Siehe den Stift fill property von CSS-Tricks (@css-tricks) auf CodePen.

Weitere Informationen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	Ja	Ja	9+	4.4+	Ja