Propriedade CSS fill
A propriedade CSS fill define a cor de preenchimento de formas SVG. Veja exemplos e valores disponíveis.
A propriedade CSS fill é usada para definir a cor interior de uma forma SVG. Ela aceita valores de cor, none, currentColor e referências url().
Você pode encontrar cores da web com nossa ferramenta Color Picker e na seção de cores HTML.
| Valor Inicial | currentColor |
|---|---|
| Aplica-se a | Todos os elementos SVG de forma, texto e textPath. |
| Herdado | Sim. |
| Animável | Sim. |
| Versão | SVG 1.1 |
| Sintaxe DOM | object.style.fill = "#8ebf42"; |
Sintaxe
Sintaxe da propriedade CSS fill
fill: color | none | currentColor | url(<id>) | initial | inherit;Exemplo da propriedade 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
Exemplo da propriedade fill com o 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>Exemplo da propriedade fill com o 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>Exemplo da propriedade fill com padrões:
<!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 a propriedade fill
A propriedade fill torna o SVG mais flexível do que arquivos de imagem padrão. Por exemplo, arquivos de imagem padrão como JPG, GIF ou PNG exigem versões separadas para diferentes esquemas de cores. Com SVG, podemos alterar as cores dos ícones usando essa propriedade sem precisar de arquivos extras. Você pode fazer isso usando o código abaixo:
Valores da propriedade CSS fill
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Valores
| Valor | Descrição |
|---|---|
| color | Indica a cor da forma. O padrão é o valor color computado do elemento. Podem ser usados nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl() e hsla(). Também aceita referências url() para padrões ou gradientes definidos na seção <defs>. |
| none | Torna a forma transparente. |
| currentColor | Define a cor de preenchimento para a cor de texto atual do elemento. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade de seu elemento pai. |
Prática
Prática
Quais aspectos a propriedade 'fill' do CSS afeta nos elementos svg?
Was this page helpful?