A fillpropriedade em CSS é para preencher a cor de uma forma SVG.
.eyeball ( fill: red; )Lembrar:
- Isto irá substituir um atributo de apresentação
- Isso não substituirá um estilo embutido, por exemplo
Valores
A fillpropriedade pode aceitar qualquer valor de cor CSS.
- Cores nomeadas -
orange - Cores hexadecimais -
#FF9E2C - Cores RGB e RGBa -
rgb(255, 158, 44)ergba(255, 158, 44, .5) - Cores HSL e HSLa -
hsl(32, 100%, 59%)ehsla(32, 100%, 59%, .5)
Como bônus, filltambém aceita os padrões de formas SVG que são definidas dentro de um defselemento:
.module ( fill: url(#pattern); )Veja a propriedade Pen fill por CSS-Tricks (@ css-tricks) em CodePen.
Um caso de uso
Um caso de uso comum para fillé alterar a cor de um SVG ao passar o mouse, da mesma forma que fazemos colorao definir o estilo do link.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Veja a propriedade Pen fill por CSS-Tricks (@ css-tricks) em CodePen.
Outro caso de uso
A fillpropriedade é uma das muitas razões pelas quais o SVG é uma opção muito mais flexível do que os arquivos de imagem típicos. Vamos pegar os ícones, como exemplo.
Podemos ter o mesmo conjunto de ícones, mas em dois esquemas de cores diferentes. Arquivos de imagem típicos (como JPG.webp, PNG e GIF) exigem que façamos duas versões de cada ícone - uma para cada esquema de cores.
O SVG, por outro lado, nos permite pintar os ícones usando a fillpropriedade CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Agora podemos reutilizar o mesmo arquivo SVG para vários cenários, alterando o nome da classe do caminho ou forma:
Veja a propriedade Pen fill por CSS-Tricks (@ css-tricks) em CodePen.
Mais Informações
- SVG 1.1 Spec
- MDN em preenchimentos e traços
- Cascading SVG Fill Color
- Padrões de preenchimento SVG por Jacob Jenkov
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| sim | sim | sim | sim | 9+ | 4,4+ | sim |