fill

Das fill-Attribut hat zwei unterschiedliche Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (oder andere SVG-Farbquellen wie Verläufe oder Muster) definiert, die zum Färben des Elements verwendet wird. Für Animationen definiert es den Endzustand der Animation.

Hinweis: Wenn fill als Präsentationsattribut verwendet wird, hat es auch ein entsprechendes CSS-Attribut: fill. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Das SVG-Präsentationsattribut fill und die CSS-fill-Eigenschaft können mit den folgenden SVG-Elementen verwendet werden:

Das SVG-Attribut fill kann verwendet werden, um den Endzustand einer Animation mit den folgenden SVG-Elementen zu definieren:

Beispiele

Grundlegende Farb- und Verlaufsausfüllungen sowie Animationen

html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Basic color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

context-fill Beispiel

In diesem Beispiel definieren wir drei Formen unter Verwendung von <path>-Elementen, wobei jede eine unterschiedliche stroke- und fill-Farbe hat. Ebenso definieren wir ein <circle>-Element als Markierung durch das <marker>-Element. Jede Form hat die Markierung über die CSS-Eigenschaft marker angewendet.

Das <circle>-Element hat die Attribute stroke="context-stroke" und fill="context-fill" gesetzt. Da es im Kontext der Formen als Markierung gesetzt ist, bewirken diese Attribute, dass es die fill- und stroke-Werte vom jeweiligen <path>-Element übernimmt.

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url(#circle);
    }
  </style>
  <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"
        stroke="red" fill="orange" />
  <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"
        stroke="green" fill="lightgreen" />
  <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"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

Das Ergebnis sieht wie folgt aus:

Hinweis: Elemente können auch context-stroke und context-fill verwenden, um stroke- und fill-Werte zu übernehmen, wenn sie von <use>-Elementen referenziert werden.

animate

Für <animate> definiert fill den Endzustand der Animation.

Wert freeze (Beibehaltung des Zustands des letzten Animationsframes) | remove (Zustand des ersten Animationsframes zurücksetzen)
Standardwert remove
Animierbar Nein

animateMotion

Für <animateMotion> definiert fill den Endzustand der Animation.

Wert freeze (Beibehaltung des Zustands des letzten Animationsframes) | remove (Zustand des ersten Animationsframes zurücksetzen)
Standardwert remove
Animierbar Nein

animateTransform

Für <animateTransform> definiert fill den Endzustand der Animation.

Wert freeze (Beibehaltung des Zustands des letzten Animationsframes) | remove (Zustand des ersten Animationsframes zurücksetzen)
Standardwert remove
Animierbar Nein

circle

Für <circle> ist fill ein Präsentationsattribut, das die Farbe des Kreises definiert.

Wert <paint>
Standardwert black
Animierbar Ja

ellipse

Für <ellipse> ist fill ein Präsentationsattribut, das die Farbe der Ellipse definiert.

Wert <paint>
Standardwert black
Animierbar Ja

path

Für <path> ist fill ein Präsentationsattribut, das die Farbe des Innenbereichs der Form definiert. (Der Innenbereich wird durch das Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)

Wert <paint>
Standardwert black
Animierbar Ja

polygon

Für <polygon> ist fill ein Präsentationsattribut, das die Farbe des Innenbereichs der Form definiert. (Der Innenbereich wird durch das Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)

Wert <paint>
Standardwert black
Animierbar Ja

polyline

Für <polyline> ist fill ein Präsentationsattribut, das die Farbe des Innenbereichs der Form definiert. (Der Innenbereich wird durch das Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)

Wert <paint>
Standardwert black
Animierbar Ja

rect

Für <rect> ist fill ein Präsentationsattribut, das die Farbe des Rechtecks definiert.

Wert <paint>
Standardwert black
Animierbar Ja

set

Für <set> definiert fill den Endzustand der Animation.

Wert freeze (Beibehaltung des Zustands des letzten Animationsframes) | remove (Zustand des ersten Animationsframes zurücksetzen)
Standardwert remove
Animierbar Nein

text

Für <text> ist fill ein Präsentationsattribut, das die Farbe des Textes definiert.

Wert <paint>
Standardwert black
Animierbar Ja

textPath

Für <textPath> ist fill ein Präsentationsattribut, das die Farbe des Textes definiert.

Wert <paint>
Standardwert black
Animierbar Ja

tref

Warnung: Ab SVG2 ist <tref> veraltet und sollte nicht mehr verwendet werden.

Für <tref> ist fill ein Präsentationsattribut, das die Farbe des Textes definiert.

Wert <paint>
Standardwert black
Animierbar Ja

tspan

Für <tspan> ist fill ein Präsentationsattribut, das die Farbe des Textes definiert.

Wert <paint>
Standardwert black
Animierbar Ja

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Browser-Kompatibilität

svg.elements.circle.fill

BCD tables only load in the browser

svg.elements.ellipse.fill

BCD tables only load in the browser

svg.elements.path.fill

BCD tables only load in the browser

svg.elements.polygon.fill

BCD tables only load in the browser

svg.elements.polyline.fill

BCD tables only load in the browser

svg.elements.rect.fill

BCD tables only load in the browser

svg.elements.text.fill

BCD tables only load in the browser

svg.elements.textPath.fill

BCD tables only load in the browser

svg.elements.tref.fill

BCD tables only load in the browser

svg.elements.tspan.fill

BCD tables only load in the browser

Siehe auch

  • CSS fill-Eigenschaft