fill
====

O atributo **`fill`** pode ter duas diferentes interpretações. Para formas e textos, é definido como um atributo de apresentação que define a cor (ou qualquer modelo de pintura SVG como gradientes ou padrões) utilizada para colorir um elemento; para animações ele é quem define o estado final de uma animação.
Como um atributo de apresentação, ele pode ser aplicado a qualquer elemento, mas só tem efeito nestes onze elementos seguintes: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>`, `<tref>`, e `<tspan>`.

Para animação, apenas cinco elementos utilizam este atributo, sendo elas: `<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, e `<set>`.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 300 100" xmlns="https://www.w3.org/2000/svg">
  <!-- Preenchimento simples com apenas uma cor -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Preenchimento do circulo com gradiente -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
 Mantendo o estado final de um círculo animado
 sendo um círculo com o raio de 40px.
 -->
  <circle cx="250" cy="50" r="20">
    <animate
 attributeType="XML"
 attributeName="r"
 from="0"
 to="40"
 dur="5s"
 fill="freeze" />
  </circle>
</svg>
```

altGlyph
--------

**Aviso:** a partir da versão SVG2, a tag `<altGlyph>` está obsoleta e não deve ser utilizada.

Para `<altGlyph>`, `fill` é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

animate
-------

Para `<animate>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateColor
------------

> 
> \*\*Aviso:\*\*A partir da versão de animação para modelos SVG2 `<animateColor>` está obsoleto e não deve ser utilizado. Ao invés disso utilize `<animate>`.
> 
> 
> 

Para `<animateColor>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateMotion
-------------

Para `<animateMotion>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

animateTransform
----------------

Para `<animateTransform>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

circle
------

Para `<circle>`, `fill` é o atributo de apresentação utilizado para definir a coloração de um círculo.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

ellipse
-------

Para `<ellipse>`, `fill` é o atributo de apresentação utilizado para definir a cor de uma elipse.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

path
----

Para `<path>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

polygon
-------

Para `<polygon>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

polyline
--------

For `<polyline>`, `fill` é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo *`fill-rule (en-US)`*).

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

rect
----

Para `<rect>`, `fill` é o atributo de apresentação utilizado para definir a cor de um retângulo.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

set
---

Para `<set>`, o atributo `fill` define o estado final de uma animação.

| Valor | `freeze` (*Mantém o estado do último quadro de animação*) | `remove` (*Mantém o estado do primeiro quadro de animação*) |
| --- | --- |
| Valor Padrão | `remove` |
| Animável | Não |

text
----

Para `<text>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto.

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

textPath
--------

For `<textPath>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

tref
----

**Aviso:** a partir da versão SVG2, a tag `<tref>` está obsoleta e não deve ser utilizada.

Para `<tref>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

tspan
-----

Para `<tspan>`, `fill` é o atributo de apresentação utilizado para definir a cor de um texto

| Valor | **<paint>** |
| --- | --- |
| Valor Padrão | `black` |
| Animável | Sim |

**Nota:** Por ser um atributo de apresentação, `fill` pode ser usado como uma propriedade CSS.

Especificações
--------------

| Specification |
| --- |
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**Nota:** Nota: Para obter informações do uso do `context-fill` (e do `context-stroke`) de documentos HTML, consulte a documentação da propriedade não-padrão `-moz-context-properties` .