CSS-Fill-Eigenschaft
Die CSS-Eigenschaft fill wird verwendet, um die Innenfarbe einer SVG-Form festzulegen. Sie akzeptiert Farbwerte, none, currentColor und url()-Referenzen.
Webfarben finden Sie mit unserem Tool Color Picker und im Abschnitt HTML-Farben.
| Initial Value | currentColor |
|---|---|
| Applies to | All SVG shapes, text, and textPath elements. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | SVG 1.1 |
| DOM Syntax | object.style.fill = "#8ebf42"; |
Syntax
Syntax der CSS-Eigenschaft fill
css
fill: color | none | currentColor | url(<id>) | initial | inherit;Beispiel für die Eigenschaft fill:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
circle {
fill: #1c87c9;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft fill mit dem Wert "color":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-1 {
fill: red;
}
.fill-2 {
fill: #228B22;
}
.fill-3 {
fill: rgb(255, 165, 0);
}
.fill-4 {
fill: hsl(248, 53%, 58%)
}
</style>
</head>
<body>
<h3>CSS | fill</h3>
<div class="container">
<svg viewBox="0 0 800 800">
<circle class="fill-1" cx="150" cy="150" r="50" />
<circle class="fill-2" cx="300" cy="150" r="50" />
<circle class="fill-3" cx="450" cy="150" r="50" />
<circle class="fill-4" cx="600" cy="150" r="50" />
</svg>
</div>
</body>
</html>Beispiel für die Eigenschaft fill mit dem Wert "currentColor":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text-container {
color: #1c87c9;
}
.fill-current {
fill: currentColor;
}
</style>
</head>
<body>
<div class="text-container">
<svg viewBox="0 0 100 100">
<circle class="fill-current" cx="50" cy="50" r="50" />
</svg>
</div>
</body>
</html>Beispiel für die Eigenschaft fill mit Mustern:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-pattern-1 {
fill: url(#pattern-one);
}
.fill-pattern-2 {
fill: url(#pattern-two);
}
</style>
</head>
<body>
<h3>Fill</h3>
<div class="container">
<svg viewBox="0 0 800 800">
<defs>
<pattern id="pattern-one" viewBox="0 0 11 11" width="15%" height="15%" patternUnits="objectBoundingBox">
<circle r="10" fill="green" />
</pattern>
<pattern id="pattern-two" viewBox="0 0 9 9" width="15%" height="15%" patternUnits="objectBoundingBox">
<rect height="4" width="4" fill="red" />
</pattern>
</defs>
<circle class="fill-pattern-1" cx="150" cy="150" r="55" />
<circle class="fill-pattern-2" cx="300" cy="150" r="55" />
</svg>
</div>
</body>
</html>SVG und die Eigenschaft fill
Die Eigenschaft fill macht SVG flexibler als Standard-Bilddateien. Standard-Bilddateien wie JPG, GIF oder PNG benötigen beispielsweise separate Versionen für unterschiedliche Farbschemata. Mit SVG können wir die Symbolfarben mit dieser Eigenschaft ändern, ohne zusätzliche Dateien zu benötigen. Sie können dies mit dem folgenden Code tun:
Werte der CSS-Eigenschaft fill
css
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Werte
| Value | Description |
|---|---|
| color | Gibt die Farbe der Form an. Standardmäßig wird der berechnete color-Wert des Elements verwendet. Farbnamen, Hexadezimalcodes, rgb(), rgba(), hsl() und hsla() können verwendet werden. Außerdem werden url()-Referenzen auf Muster oder Verläufe akzeptiert, die im <defs>-Abschnitt definiert sind. |
| none | Macht die Form transparent. |
| currentColor | Setzt die Füllfarbe auf die aktuelle Textfarbe des Elements. |
| initial | Verwendet den Standardwert der Eigenschaft. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
Welche Eigenschaften beeinflusst die CSS-Eigenschaft 'fill' in SVG-Elementen?