Propiedad fill de CSS
La propiedad CSS fill se utiliza para establecer el color interior de una forma SVG. Acepta valores de color, none, currentColor y referencias url().
Puedes encontrar colores web con nuestra herramienta Color Picker y en la sección Colores HTML.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todas las formas SVG, texto y elementos textPath. |
| Heredado | Sí. |
| Animable | Sí. |
| Versión | SVG 1.1 |
| Sintaxis DOM | object.style.fill = "#8ebf42"; |
Sintaxis
Sintaxis de la propiedad fill de CSS
fill: color | none | currentColor | url(<id>) | initial | inherit;Ejemplo de la propiedad 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>Resultado
Ejemplo de la propiedad fill con el valor "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>Ejemplo de la propiedad fill con el valor "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>Ejemplo de la propiedad fill con patrones:
<!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 y la propiedad fill
La propiedad fill hace que SVG sea más flexible que los archivos de imagen estándar. Por ejemplo, los archivos de imagen estándar como JPG, GIF o PNG requieren versiones separadas para diferentes esquemas de color. Con SVG, podemos cambiar los colores de los iconos utilizando esta propiedad sin necesidad de archivos adicionales. Puedes hacerlo con el siguiente código:
Valores de la propiedad fill de CSS
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Valores
| Valor | Descripción |
|---|---|
| color | Indica el color de la forma. Por defecto, toma el valor calculado color del elemento. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl() y hsla(). También acepta referencias url() a patrones o degradados definidos en la sección <defs>. |
| none | Hace que la forma sea transparente. |
| currentColor | Establece el color de relleno en el color de texto actual del elemento. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué propiedades afecta la propiedad 'fill' de CSS en los elementos svg?