`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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die fill CSS Eigenschaft definiert, wie SVG-Textinhalte und der innere Bereich 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 "innerhalb" einer Form ist, ist möglicherweise nicht immer klar. Die Pfade, die eine Form definieren, können sich überlappen. Die Bereiche, die als "innerhalb" dieser komplexen Formen betrachtet werden, werden durch die fill-rule Eigenschaft oder das Attribut geklärt.

Falls Unterpfade offen sind, schließt fill den Pfad vor dem Färben, als ob ein "closepath"-Befehl enthalten wäre, 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 einen closepath-Befehl) und polyline-Elementen.

Hinweis: Die fill Eigenschaft gilt nur für <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, und <tspan> Elemente, die in einem <svg> verschachtelt 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 ein Schlüsselwort, <color>, oder url() mit einem optionalen <color> angegeben:

none: Es wird keine fill bemalt; die Bereiche innerhalb des Umrisses, falls vorhanden, sind transparent.
context-fill: Verwendet den Farbwert von fill aus einem Kontextelement.
context-stroke: Verwendet den Farbwert von stroke aus einem Kontextelement.
<color>: Die Farbe der Füllung als jeder gültige CSS-<color>-Wert.
<url>: Ein URL-Verweis auf ein SVG-Farbserver-Element, wie zum Beispiel ein <linearGradient>, <radialGradient>, oder <pattern>. Der Ressourcenverweis kann optional von einem <color> oder none gefolgt werden, welches als Fallback verwendet wird, falls der referenzierte Farbserver 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üllen von SVG-Elementen definieren

In diesem Beispiel wird demonstriert, wie ein fill deklariert wird, die Wirkung 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 das Standard-black gesetzt. Wir fügen einen dunkelgrauen Umriss 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 CSS fill Eigenschaftswert überschreibt den SVG fill Attributwert, was dazu führt, dass beide Formen mit einer roten Farbe gefüllt werden; das Rot des Polygons ist durchsichtig.

Verwendung von `fill` Schlüsselwortwerten

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

HTML

Wir inkludieren drei <path> Elemente und ein <marker> Element, das einen <circle> zu jedem Pfadpunkt hinzufügt. Wir setzen das Kreismerkmal mit einem schwarzen Umriss und 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 verschiedene stroke und fill Farben auf jeden Pfad. Der erste Pfad, der mit einem roten Rand, hat seine fill auf none gesetzt. Wir setzen das Kreismerkmal auf den gleichen Farbwert wie den Umriss des markierten Elements, indem wir den context-stroke Wert 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, dass der erste Pfad einen transparenten Hintergrund hat, weil die fill none ist und das Standard-fill von black überschreibt. Die Kreise sind mit der Farbe des Umrisses gefüllt. Wenn Sie den Wert auf context-fill ändern, sind die Kreise transparent, lightgreen und lightblue anstatt red, green, und blue.

Füllungen und Fallbacks

Dieses Beispiel zeigt, wie man einen url() Wert mit einem Fallback als fill Wert einschließt.

HTML

Wir haben ein SVG, das zwei <polygon> Sterne und einen <linearGradient> enthält, der von grün zu 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 die Polygone im SVG, indem wir einen url() Wert und einen Fallback bereitstellen.

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, weil das in der url() referenzierte Element nicht existiert.