fill

none

Es wird keine Füllung gemalt; die Bereiche innerhalb des Strichs, 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>

Eine URL-Referenz zu einem SVG-Malserver-Element, wie z.B. ein <linearGradient>, <radialGradient> oder <pattern>. Die Ressourcenreferenz kann optional von einem <color> oder none gefolgt werden, das als Fallback verwendet wird, falls der referenzierte Malserver 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, definiert mit den SVG <polygon> und <path> Elementen. Beide haben das fill Attribut auf #000 gesetzt (äquivalent zum Standardwert, black). Wir fügen einen dunkelgrauen Strich von #666 mit dem SVG stroke Attribut hinzu, hätten aber auch 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, so dass beide Formen mit einer roten Farbe gefüllt werden; das Rot des Polygons ist durchscheinend.

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

HTML

Wir fügen drei <path> Elemente und ein <marker> Element ein, das einen <circle> zu jedem Pfadpunkt hinzufügt. Wir setzen den Kreis-Marker mit einem schwarzen Rand und einer grauen Füllung durch die SVG stroke und fill Attribute.

<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, der mit einem roten Rand, hat seine fill auf none gesetzt. Wir setzen die Stroke- und Fill-Werte des Kreis-Markers auf die gleiche Farbe wie die Strichfarbe des Elements, das sie markieren, unter Verwendung des context-stroke Wertes.

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 die Standardfüllung 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 anstelle von 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 einem <linearGradient>, das von grün zu gold zu rot übergeht.

<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 ein Fallback angeben.

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 in der 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