Proprietà CSS fill
La proprietà CSS fill viene usata per riempire di colore una forma SVG. Questa proprietà è deprecata. Vedi esempi.
La proprietà CSS fill viene usata per impostare il colore interno di una forma SVG. Accetta valori di colore, none, currentColor e riferimenti url().
Puoi trovare i colori web con il nostro strumento Color Picker e nella sezione Colori HTML.
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutte le forme SVG, gli elementi text e textPath. |
| Ereditato | Sì. |
| Animabile | Sì. |
| Versione | SVG 1.1 |
| Sintassi DOM | object.style.fill = "#8ebf42"; |
Sintassi
Sintassi della proprietà CSS fill
fill: color | none | currentColor | url(<id>) | initial | inherit;Esempio della proprietà fill:
<!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>Risultato
Esempio della proprietà fill con il valore "color":
<!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>Esempio della proprietà fill con il valore "currentColor":
<!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>Esempio della proprietà fill con i pattern:
<!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 e la proprietà fill
La proprietà fill rende SVG più flessibile rispetto ai file immagine standard. Ad esempio, i file immagine standard come JPG, GIF o PNG richiedono versioni separate per diversi schemi di colore. Con SVG, possiamo cambiare i colori delle icone usando questa proprietà senza necessità di file aggiuntivi. Puoi farlo usando il codice seguente:
Valori della proprietà CSS fill
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Valori
| Valore | Descrizione |
|---|---|
| color | Indica il colore della forma. Il valore predefinito è il valore color calcolato dell'elemento. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl() e hsla(). Accetta anche riferimenti url() a pattern o gradienti definiti nella sezione <defs>. |
| none | Rende la forma trasparente. |
| currentColor | Imposta il colore di riempimento al colore del testo corrente dell'elemento. |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. |
| inherit | Eredita la proprietà dal suo elemento genitore. |