`fill` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die fill CSS-Eigenschaft definiert, wie SVG-Textinhalte und die Innenfläche von SVG-Formen gefüllt oder bemalt werden. Falls vorhanden, überschreibt sie das fill-Attribut des Elements.

Die Bereiche innerhalb der Umrisse der SVG-Form oder des Textes werden bemalt. Was "innen" in einer Form ist, mag nicht immer klar sein. Die Pfade, die eine Form definieren, können sich überlappen. Die Bereiche, die als "innen" in diesen komplexen Formen betrachtet werden, werden durch die fill-rule-Eigenschaft oder den Attribut geklärt.

Falls Unterpfade offen sind, schließt fill den Pfad vor dem Bemalen, als ob ein "closepath"-Befehl eingefügt würde, der den letzten Punkt des Unterpfades mit dem ersten Punkt des Unterpfades verbindet. Mit anderen Worten, fill gilt für offene Unterpfade innerhalb von path-Elementen (d.h. Unterpfade ohne "closepath"-Befehl) und polyline-Elementen.

Hinweis: Die fill-Eigenschaft gilt nur für die <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> und <tspan> Elemente, die in einem <svg> eingebettet sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css

/* keywords */
fill: none;
fill: context-fill;
fill: context-stroke;

/* <color> values */
fill: red;
fill: hsl(120deg 75% 25% / 60%);

/* <url> values */
fill: url("#gradientElementID");
fill: url("star.png");

/* <url> with fallback */
fill: url("#gradientElementID") blue;
fill: url("star.png") none;

/* Global values */
fill: inherit;
fill: initial;
fill: revert;
fill: revert-layer;
fill: unset;

Werte

Diese Eigenschaft wird als Einzelwert aus der folgenden Liste oder als zwei Werte bei Verwendung von <url> angegeben:

none: Es wird keine fill gemalt; die Bereiche innerhalb des Stroke, falls vorhanden, sind transparent.
context-fill: Verwendet den Farbwert von fill eines Kontextelements.
context-stroke: Verwendet den Farbwert von stroke eines Kontextelements.
<color>: Die Farbe der Füllung als gültiger CSS <color>-Wert.
<url>: Ein URL-Verweis auf ein SVG-Malserver-Element, wie ein <linearGradient>, <radialGradient> oder <pattern>. Der Ressourcenverweis kann optional von einem <color> oder none gefolgt werden, das als Fallback verwendet wird, falls der referenzierte Malserver nicht aufgelöst wird.

Formale Definition

Anfangswert	`black`
Anwendbar auf	SVG shapes and text content elements
Vererbt	Ja
Berechneter Wert	as specified, but with `<color>` values computed and `<url>` values made absolute
Animationstyp	by computed value type

Formale Syntax

fill = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<svg-paint> = 
  child               |
  child( <integer> )  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<integer> = 
  <number-token>  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

Füllwerte für SVG-Elemente definieren

Dieses Beispiel zeigt, wie ein fill deklariert wird, den Effekt der Eigenschaft und wie die CSS fill-Eigenschaft das fill-Attribut überschreibt.

HTML

Wir haben ein SVG mit zwei komplexen Formen, die mit den SVG <polygon> und <path> Elementen definiert sind. Beide haben das fill-Attribut auf den Standardwert black gesetzt. Wir fügen einen dunkelgrauen Stroke von #666666 mit dem SVG stroke-Attribut hinzu, hätten aber auch die stroke-Eigenschaft verwenden können.

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="#666666"
    fill="black" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666666"
    fill="black" />
</svg>

CSS

Wir setzen fill-Werte auf die Formen im SVG.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

Ergebnisse

Der Wert der CSS fill-Eigenschaft überschreibt den Wert des SVG fill-Attributs, was dazu führt, dass beide Formen mit einer roten Farbe gefüllt werden; die Rot der Polygon ist durchscheinend.

Verwendung von Füll-Schlüsselwortwerten

Dieses Beispiel zeigt die Verwendung von Schlüsselwortwerten für fill.

HTML

Wir fügen drei <path>-Elemente und ein <marker>-Element hinzu, das einem jeden Punkt des Pfades einen <circle> hinzufügt. Wir setzen den Kreismarker auf schwarz mit einer grauen Füllung mit den SVG stroke und fill Attributen.

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
  <path
    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
  <marker
    id="circle"
    markerWidth="12"
    markerHeight="12"
    refX="6"
    refY="6"
    markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
  </marker>
</svg>

CSS

Wir setzen unterschiedliche stroke- und fill-Farben auf jeden Pfad. Der erste Pfad, jener mit einem roten Rand, hat seine fill auf none gesetzt. Wir setzen den Stroke und die Füllfarbe des Kreismarker auf die gleiche Farbe wie der Stroke des Elements, das sie markieren, indem wir den Wert context-stroke verwenden.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  stroke-width: 2px;
  marker: url("#circle");
}
path:nth-of-type(1) {
  stroke: red;
  fill: none;
}
path:nth-of-type(2) {
  stroke: green;
  fill: lightgreen;
}
path:nth-of-type(3) {
  stroke: blue;
  fill: lightblue;
}
circle {
  stroke: context-stroke;
  fill: context-stroke;
}

Ergebnisse

Beachten Sie, wie der erste Pfad einen transparenten Hintergrund hat, weil fill auf none steht und damit die Standardfüllung von black überschreibt. Die Kreise sind mit der Farbe des Strokes gefüllt. Wenn Sie den Wert auf context-fill ändern, werden die Kreise transparent, lightgreen und lightblue anstelle von red, green und blue.

Füllungen und Fallbacks

Dieses Beispiel demonstriert, wie man einen url()-Wert mit einem Fallback als fill-Wert einfügt.

HTML

Wir haben ein SVG, das zwei <polygon> Sterne und einen <linearGradient> enthält, der von grün über gold zu rot verläuft.

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points="80,10 50,100 120,40 40,40 110,100" />
  <polygon points="180,10 150,100 220,40 140,40 210,100" />
</svg>

CSS

Wir setzen fill-Werte auf den Polygonen im SVG, wobei wir einen url()-Wert und ein Fallback angeben.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

polygon:first-of-type {
  fill: url("#myGradient") magenta;
}
polygon:last-of-type {
  fill: url("#MISSINGIMAGE") magenta;
}

Ergebnisse

Der erste Stern hat einen Verlauf als Hintergrund. Der zweite Stern verwendet den Fallback-Wert, da das in der url() referenzierte Element nicht existiert.