fill
Das fill-Attribut hat zwei unterschiedliche Bedeutungen. Für Formen und Text ist es ein Präsentationsattribut, das die Farbe (oder einen SVG-Farbdienst wie Verläufe oder Muster) definiert, welche zum Füllen des Elements verwendet wird; für Animationen definiert es den Endzustand der Animation.
Das SVG-Präsentationsattribut fill und die CSS-Eigenschaft fill können mit den folgenden SVG-Elementen verwendet werden:
Das SVG-Attribut fill kann verwendet werden, um den Endzustand der Animation mit 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">
<!-- 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, die jeweils mit einer anderen stroke und fill-Farbe versehen sind. 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>-Element hat stroke="context-stroke" und fill="context-fill" auf sich gesetzt. Da es als Marker im Kontext der Formen gesetzt wird, bewirken diese Attribute, dass es die fill- und stroke-Werte erbt, die auf das <path>-Element in jedem Fall 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>
Das Ergebnis ist wie folgt:
Hinweis:
Elemente können auch context-stroke und context-fill verwenden, um stroke- und fill-Werte zu erben, wenn sie durch <use>-Elemente referenziert werden.
animate
Für <animate> definiert fill den Endzustand der Animation.
| Wert |
freeze (Behält den Zustand des letzten Animationsrahmens bei) | remove (Behält den Zustand des ersten Animationsrahmens bei)
|
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
animateMotion
Für <animateMotion> definiert fill den Endzustand der Animation.
| Wert |
freeze (Behält den Zustand des letzten Animationsrahmens bei) | remove (Behält den Zustand des ersten Animationsrahmens bei)
|
|---|---|
| Standardwert | remove |
| Animierbar | Nein |
animateTransform
Für <animateTransform> definiert fill den Endzustand der Animation.
| Wert |
freeze (Behält den Zustand des letzten Animationsrahmens bei) | remove (Behält den Zustand des ersten Animationsrahmens bei)
|
|---|---|
| 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 Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis:
Als Präsentationsattribut kann fill als CSS-Eigenschaft verwendet werden.
polygon
Für <polygon> ist fill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch das Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis:
Als Präsentationsattribut kann fill als CSS-Eigenschaft verwendet werden.
polyline
Für <polyline> ist fill ein Präsentationsattribut, das die Farbe des Inneren der Form definiert. (Das Innere wird durch das Attribut fill-rule oder die CSS-Eigenschaft fill-rule definiert.)
| Wert | <paint> |
|---|---|
| Standardwert | black |
| Animierbar | Ja |
Hinweis:
Als Präsentationsattribut kann fill als CSS-Eigenschaft verwendet werden.
rect
set
Für <set> definiert fill den Endzustand der Animation.
| Wert |
freeze (Behält den Zustand des letzten Animationsrahmens bei) | remove (Behält den Zustand des ersten Animationsrahmens bei)
|
|---|---|
| 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 verwendet 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