fill

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2017⁩.

Die fill CSS Eigenschaft definiert, wie SVG-Textinhalte und das Innenleben von SVG-Formen gefüllt oder bemalt werden. Wenn vorhanden, überschreibt sie das fill-Attribut des Elements.

Die Bereiche innerhalb der Umrisse der SVG-Formen oder des Textes werden bemalt. Was "innerhalb" einer Form ist, ist nicht immer klar. Die Pfade, die eine Form definieren, können sich überschneiden. Die durch diese komplexen Formen als "innerhalb" betrachteten Bereiche werden durch die fill-rule Eigenschaft oder Attribut geklärt.

Wenn Unterpfade offen sind, schließt fill den Pfad vor dem Bemalen, als ob ein "closepath"-Befehl enthalten wäre, der den letzten Punkt des Unterpfads mit dem ersten Punkt des Unterpfads verbindet. Anders ausgedrückt, 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 <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

none: Keine fill wird bemalt; die Bereiche innerhalb des Strichs, falls vorhanden, sind transparent.
context-fill: Verwendet den Farbwert von fill aus einem Kontext-Element.
context-stroke: Verwendet den Farbwert von stroke aus einem Kontext-Element.
<color>: Die Farbe der Füllung als ein gültiger CSS <color> Wert.
<url>: Ein URL-Verweis auf ein SVG-Farbserverelement, wie ein <linearGradient>, <radialGradient>, oder <pattern>. Der Ressourcenverweis kann optional von einem <color> oder none gefolgt werden, welcher 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>       |
  <gradient>  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Füllwerte für SVG-Elemente definieren

Dieses Beispiel zeigt, wie eine fill deklariert wird, die Wirkung der Eigenschaft, und wie die CSS fill-Eigenschaft gegenüber dem fill-Attribut Vorrang hat.

HTML

Wir haben ein SVG mit zwei komplexen Formen, die mit den SVG-Elementen <polygon> und <path> definiert sind. Beide haben das fill-Attribut auf den Standardwert black gesetzt. Wir fügen mit dem SVG-Attribut stroke einen dunkelgrauen Strich von #666666 hinzu, hätten aber die Eigenschaft stroke 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 den 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-Attributes, was dazu führt, dass beide Formen mit einer roten Farbe gefüllt werden; das Rot des Polygons ist transluzent.

Verwendung von Schlüsselwortwerten für fill

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

HTML

Wir fügen drei <path>-Elemente und ein <marker>-Element hinzu, das einen <circle> zu jedem Pfadpunkt hinzufügt. Wir setzen den Kreismarker mit schwarzen Umrandungen und grauen Füllungen mit den SVG-Attributen stroke und fill.

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 jedem Pfad. Der erste Pfad, der mit einer roten Umrandung, hat sein fill auf none gesetzt. Wir setzen den Kreismarker für den Strich und die Füllung auf die gleiche Farbe wie den Strich des Elements, das sie markieren, unter Verwendung des context-stroke-Wertes.

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, wodurch das Standard-fill von black überschrieben wird. Die Kreise sind mit der Farbe des Strichs gefüllt. Wenn Sie den Wert in context-fill ändern, sind die Kreise transparent, lightgreen und lightblue anstelle von red, green und blue.

Füllungen und Fallbacks

Dieses Beispiel zeigt, wie ein url()-Wert mit einem Fallback als fill-Wert enthalten sein kann.

HTML

Wir haben eine SVG, die zwei <polygon> Sterne und ein <linearGradient> enthält, das von Grün zu Gold zu Rot übergeht.

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, wobei wir einen url()-Wert und einen 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 im url() referenzierte Element nicht existiert.

Spezifikationen

Specification
CSS Fill and Stroke Module Level 3 # fill-shorthand

Browser-Kompatibilität

Siehe auch

SVG fill Attribut
Präsentationseigenschaften: fill, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, und vector-effect
opacity
background-color
<color>
<basic-shape> Datentyp

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden