fill
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
ellipse
path
polygon
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
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
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
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 .