CSS-Eigenschaft fill

Die Eigenschaft fill füllt eine Farbe einer SVG-Form aus. Die Eigenschaft fill kann jeden CSS-Farbwert akzeptieren.

Die Webfarben finden Sie mit unserem Farbwähler und im Bereich HTML-Farben.

Anfangswert black
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Ja
Version SVG 1.1
DOM Syntax object.style.Fill = "#8ebf42";

Syntax

fill: color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      circle {
      fill: #1c87c9;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50"/>
    </svg>
  </body>
</html>

Werte

Wert Beschreibung
color Zeigt die Farbe der Form an. Die Standardfarbe ist die Farbe des Elements. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Die Eigenschaft fill akzeptiert auch die Muster von SVG-Formen, die definiert sind.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
? ? ? ? ?

Übe dein Wissen

Welche Farbe wird durch die CSS-Eigenschaft 'fill' geändert?
Finden Sie das nützlich?