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
<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).

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).

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).

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
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Compatibilidade com navegadores

svg.elements.circle.fill

BCD tables only load in the browser

svg.elements.ellipse.fill

BCD tables only load in the browser

svg.elements.path.fill

BCD tables only load in the browser

svg.elements.polygon.fill

BCD tables only load in the browser

svg.elements.polyline.fill

BCD tables only load in the browser

svg.elements.rect.fill

BCD tables only load in the browser

svg.elements.text.fill

BCD tables only load in the browser

svg.elements.textPath.fill

BCD tables only load in the browser

svg.elements.tref.fill

BCD tables only load in the browser

svg.elements.tspan.fill

BCD tables only load in the browser

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 .