Propiedad CSS fill
La propiedad CSS fill se usa para rellenar el color de una forma SVG. Esta propiedad está obsoleta. Ver ejemplos.
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 de colores HTML.
| Valor inicial | currentColor |
|---|---|
| Aplicable a | Todos los elementos SVG de formas, texto y textPath. |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | SVG 1.1 |
| Sintaxis DOM | object.style.fill = "#8ebf42"; |
Sintaxis
Sintaxis de la propiedad CSS fill
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 usando esta propiedad sin necesidad de archivos adicionales. Puedes hacerlo usando el siguiente código:
Valores de la propiedad CSS fill
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Valores
| Valor | Descripción |
|---|---|
| color | Indica el color de la forma. Por defecto toma el valor calculado de color del elemento. Se pueden usar nombres de color, códigos hexadecimales, rgb(), rgba(), hsl() y hsla(). También acepta referencias url() a patrones o gradientes definidos en la sección <defs>. |
| none | Hace que la forma sea transparente. |
| currentColor | Establece el color de relleno al color de texto actual del elemento. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |