Dasfill-Attribut hat zwei verschiedene Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (oder andere SVG-Farbgeber wie Verlaufsfarben oder Muster) definiert, die verwendet wird, um das Element zu färben; für Animationen definiert es den Endzustand der Animation.

Das SVG-Präsentationsattributfill und die CSS-Eigenschaftfill können mit den folgenden SVG-Elementen verwendet werden:

• <circle>
• <ellipse>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tspan>

Das SVGfill-Attribut kann verwendet werden, um den finalen Animationszustand mit den folgenden SVG-Elementen zu definieren:

• <animate>
• <animateMotion>
• <animateTransform>
• <set>.

Beispiele

Grundlegende Farb- und Verlaufsfüllungen sowie Animation

html,body,svg {  height: 100%;}

<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>      <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 mit<path>-Elementen, die jeweils eine unterschiedlichestroke undfill-Farbe haben. Wir definieren auch ein<circle>-Element als Marker über das<marker>-Element. Jede Form hat den Marker über diemarker CSS-Eigenschaft angewendet.

Das<circle>-Element hatstroke="context-stroke" undfill="context-fill" darauf gesetzt. Da es im Kontext der Formen als Marker gesetzt wird, bewirken diese Attribute, dass es diefill undstroke, die auf das<path>-Element gesetzt sind, in jedem Fall erbt.

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

Die Ausgabe ist wie folgt:

animate

Für<animate> definiertfill den finalen Zustand der Animation.

animateMotion

Für<animateMotion> definiertfill den finalen Zustand der Animation.

animateTransform

Für<animateTransform> definiertfill den finalen Zustand der Animation.

circle

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

ellipse

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

path

Für<path> istfill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch dasfill-rule-Attribut oder diefill-rule-Eigenschaft definiert.)

polygon

Für<polygon> istfill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch dasfill-rule-Attribut oder diefill-rule-Eigenschaft definiert.)

polyline

Für<polyline> istfill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch dasfill-rule-Attribut oder diefill-rule-Eigenschaft definiert.)

rect

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

set

Für<set> definiertfill den finalen Zustand der Animation.

text

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

textPath

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

tspan

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

Spezifikationen

Browser-Kompatibilität

svg.elements.animate.fill

svg.elements.animateMotion.fill

svg.elements.animateTransform.fill

svg.elements.circle.fill

svg.elements.ellipse.fill

svg.elements.path.fill

svg.elements.polygon.fill

svg.elements.polyline.fill

svg.elements.rect.fill

svg.elements.set.fill

svg.elements.text.fill

svg.elements.textPath.fill

svg.elements.tspan.fill

Siehe auch

• CSSfill Eigenschaft