fill

none

Es wird keine fill 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 beliebiger gültiger CSS <color>-Wert.

<url>

Ein URL-Verweis auf ein SVG-Farbserven-Element, wie z.B. ein <linearGradient>, <radialGradient> oder <pattern>. Der Ressourceneintrag kann optional von einem <color> oder none gefolgt werden, welches als Fallback verwendet wird, wenn der referenzierte Farbserver nicht aufgelöst wird.

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>* )  

Dieses Beispiel zeigt, wie ein fill deklariert wird, die Wirkung der Eigenschaft und wie die CSS-fill-Eigenschaft Vorrang vor dem fill-Attribut 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 #000 gesetzt (entspricht dem Standardwert, black). Wir fügen mit dem SVG-Attribut stroke einen dunkelgrauen Strich von #666 hinzu, hätten aber die stroke-Eigenschaft verwenden können.

<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="#666"
    fill="#000" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666"
    fill="#000" />
</svg>

CSS

Wir setzen fill-Werte auf die Formen im SVG.

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

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

Ergebnisse

Der CSS-fill-Eigenschaftswert überschreibt den SVG-fill-Attributwert, wodurch beide Formen in Rot gefüllt werden; das Rot des Polygons ist durchscheinend.

Dieses Beispiel zeigt das Verwenden von Schlüsselwortwerten für fill.

HTML

Wir fügen drei <path>-Elemente und ein <marker>-Element hinzu, das einen <circle> zu jedem Pfad-Punkt hinzufügt. Wir setzen den Kreismarker auf Schwarz mit einer grauen Füllung mithilfe der SVG-Attribute stroke und fill.

<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 sein fill auf none gesetzt. Wir setzen den Strich und die Füllung des Kreismarkers auf die gleiche Farbe wie den Strich des Elements, das sie markieren, mittels des context-stroke-Werts.

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

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 das fill none ist, was den Standardwert fill von black überschreibt. Die Kreise sind mit der Farbe des Strichs gefüllt. Wenn Sie den Wert auf context-fill ändern, werden die Kreise transparent, lightgreen und lightblue statt red, green und blue.

Dieses Beispiel zeigt, wie man einen url()-Wert mit einem Fallback als fill-Wert einbezieht.

HTML

Wir haben ein SVG mit zwei <polygon>-Sternen und ein <linearGradient>, das von Grün über Gold zu Rot geht.

<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 und geben einen url()-Wert und ein Fallback an.

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

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

Ergebnisse

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

• 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