La fillpropiedad en CSS es para rellenar el color de una forma SVG.
.eyeball ( fill: red; )Recuerda:
- Esto va a anular un atributo de presentación
- Esto no anulará un estilo en línea, p. Ej.
Valores
La fillpropiedad puede aceptar cualquier valor de color CSS.
- Colores nombrados -
orange - Colores hexagonales -
#FF9E2C - Colores RGB y RGBa,
rgb(255, 158, 44)yrgba(255, 158, 44, .5) - Colores HSL y HSLa -
hsl(32, 100%, 59%)yhsla(32, 100%, 59%, .5)
Como beneficio adicional, filltambién acepta los patrones de formas SVG que se definen dentro de un defselemento:
.module ( fill: url(#pattern); )Vea la propiedad de relleno de la pluma de CSS-Tricks (@ css-tricks) en CodePen.
Un caso de uso
Un caso de uso común para filles cambiar el color de un SVG al pasar el mouse, al igual que lo hacemos colorcuando se aplica el estilo del enlace.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Vea la propiedad de relleno de la pluma de CSS-Tricks (@ css-tricks) en CodePen.
Otro caso de uso
La fillpropiedad es una de las muchas razones por las que SVG es una opción mucho más flexible que los archivos de imagen típicos. Tomemos los iconos como ejemplo.
Podríamos tener el mismo conjunto de iconos pero en dos esquemas de color diferentes. Los archivos de imágenes típicos (como JPG.webp, PNG y GIF) requerirían que hagamos dos versiones de cada icono, una para cada combinación de colores.
SVG, por otro lado, nos permite pintar los íconos usando la fillpropiedad CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Ahora podemos reutilizar el mismo archivo SVG para múltiples escenarios cambiando el nombre de clase de la ruta o forma:
Vea la propiedad de relleno de la pluma de CSS-Tricks (@ css-tricks) en CodePen.
Más información
- Especificaciones de SVG 1.1
- MDN sobre rellenos y trazos
- Color de relleno SVG en cascada
- Patrones de relleno SVG por Jacob Jenkov
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | sí | sí | 9+ | 4.4+ | sí |