fill
Das fill-Attribut hat zwei unterschiedliche Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (oder jeden SVG-Malfarbspeicher wie Verlaufsfarben oder Muster) definiert, mit der das Element gefärbt wird; für Animationen definiert es den Endzustand der Animation.
Das SVG-Präsentationsattribut fill und die CSS-fill-Eigenschaft können mit den folgenden SVG-Elementen verwendet werden:
Das SVG-fill-Attribut kann verwendet werden, um den finalen Animationszustand bei den folgenden SVG-Elementen zu definieren:
Beispiele
Grundlegende Farb- und Verlaufsfüllungen sowie Animationen
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple 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 mit <path>-Elementen, jedes mit einem unterschiedlichen stroke- und fill-Farbensatz. Wir definieren auch ein <circle>-Element als Marker über das <marker>-Element. Jede Form hat den Marker über die marker-CSS-Eigenschaft angewendet.
Das <circle> hat stroke="context-stroke" und fill="context-fill" auf sich gesetzt. Da es im Kontext der Formen als Marker gesetzt wird, bewirken diese Attribute, dass es den fill und stroke übernimmt, die auf dem jeweiligen <path>-Element gesetzt sind.
<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>
Die Ausgabe ist wie folgt:
Hinweis: Elemente können auch context-stroke und context-fill verwenden, um stroke- und fill-Werte zu erben, wenn sie von <use>-Elementen referenziert werden.
animate
Für <animate> definiert fill den Endzustand der Animation.
| Wert | freeze (Halten Sie den Zustand des letzten Animationsrahmens) | remove (Halten Sie den Zustand des ersten Animationsrahmens) |
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
animateMotion
Für <animateMotion> definiert fill den Endzustand der Animation.
| Wert | freeze (Halten Sie den Zustand des letzten Animationsrahmens) | remove (Halten Sie den Zustand des ersten Animationsrahmens) |
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
animateTransform
Für <animateTransform> definiert fill den Endzustand der Animation.
| Wert | freeze (Halten Sie den Zustand des letzten Animationsrahmens) | remove (Halten Sie den Zustand des ersten Animationsrahmens) |
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
circle
ellipse
path
Für <path> ist fill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch das fill-rule-Attribut oder die fill-rule-Eigenschaft definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis: Als Präsentationsattribut kann fill als CSS-Eigenschaft genutzt werden.
polygon
Für <polygon> ist fill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch das fill-rule-Attribut oder die fill-rule-Eigenschaft definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis: Als Präsentationsattribut kann fill als CSS-Eigenschaft genutzt werden.
polyline
Für <polyline> ist fill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch das fill-rule-Attribut oder die fill-rule-Eigenschaft definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis: Als Präsentationsattribut kann fill als CSS-Eigenschaft genutzt werden.
rect
set
Für <set> definiert fill den Endzustand der Animation.
| Wert | freeze (Halten Sie den Zustand des letzten Animationsrahmens) | remove (Halten Sie den Zustand des ersten Animationsrahmens) |
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
text
textPath
Für <textPath> ist fill ein Präsentationsattribut, das die Farbe des Textes definiert.
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis: Als Präsentationsattribut kann fill als CSS-Eigenschaft genutzt werden.
tref
tspan
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