fill

none

Es wird keine fill 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 des Füllbereichs als jeder gültige CSS <color> Wert.

<url>

Eine URL-Referenz zu einem SVG-Farbserver-Element, wie ein <linearGradient>, <radialGradient>, oder <pattern>. Die Ressourcenreferenz kann optional von einem <color> oder none gefolgt werden, das als Fallback verwendet wird, falls 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 <polygon> und <path> Elementen definiert sind. Beide haben das fill Attribut auf #000 gesetzt (entspricht dem Standardwert, schwarz). Wir fügen einen dunkelgrauen Strich von #666 hinzu, indem wir das SVG stroke Attribut verwenden, könnten aber auch die stroke Eigenschaft verwenden.

<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, was dazu führt, dass beide Formen mit einer roten Farbe gefüllt sind; 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 hinzu, das einen <circle> zu jedem Punkt des Pfads hinzufügt. Wir setzen den Kreismarker auf schwarz mit einer grauen Füllung mithilfe der 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 den Strich und die Füllung des Kreismarkers auf die gleiche Farbe wie der Strich des Elements, das sie markieren, unter Verwendung des Werts context-stroke.

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 und den Standardwert fill von black überschreibt. Die Kreise sind mit der Farbe des Strichs gefüllt. Wenn Sie den Wert auf context-fill ändern, sind 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 einschließt.

HTML

Wir haben ein SVG mit zwei <polygon> Sternen und einem <linearGradient>, das von grün über gold nach rot verläuft.

<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 einen 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 Verlauf 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