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>.
<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 |
|---|
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |
Compatibilidade com navegadores
svg.elements.animate.fill
Loading…
svg.elements.animateMotion.fill
Loading…
svg.elements.animateTransform.fill
Loading…
svg.elements.circle.fill
Loading…
svg.elements.ellipse.fill
Loading…
svg.elements.path.fill
Loading…
svg.elements.polygon.fill
Loading…
svg.elements.polyline.fill
Loading…
svg.elements.rect.fill
Loading…
svg.elements.set.fill
Loading…
svg.elements.text.fill
Loading…
svg.elements.textPath.fill
Loading…
svg.elements.tspan.fill
Loading…
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 .