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:
<svgviewBox="0 0 300 100"xmlns="http://www.w3.org/2000/svg"><!-- Basic color fill --><circlecx="50"cy="50"r="40"fill="pink"/><!-- Fill circle with a gradient --><defs><radialGradientid="myGradient"><stopoffset="0%"stop-color="pink"/><stopoffset="100%"stop-color="black"/></radialGradient></defs><circlecx="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.
--><circlecx="250"cy="50"r="20"><animateattributeType="XML"attributeName="r"from="0"to="40"dur="5s"fill="freeze"/></circle></svg>
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
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 300 90"><style>path{stroke-width: 2px;marker:url(#circle);}</style><pathd="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"/><pathd="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"/><pathd="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"/><markerid="circle"markerWidth="12"markerHeight="12"refX="6"refY="6"markerUnits="userSpaceOnUse"><circlecx="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.
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.)
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.)
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.)
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Tip: you can click/tap on a cell for more information.
Full support
Full support
No support
No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.