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%;
}
< svg viewBox = " 0 0 300 100" xmlns = " https://www.w3.org/2000/svg" >
< circle cx = " 50" cy = " 50" r = " 40" fill = " pink" />
< 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)" />
< circle cx = " 250" cy = " 50" r = " 20" >
< animate
attributeType = " XML"
attributeName = " r"
from = " 0"
to = " 40"
dur = " 5s"
fill = " freeze" />
</ circle>
</ svg>
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.
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
**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
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
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
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 3
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – No support Chrome Android No
Toggle history Firefox for Android – No support Firefox for Android No
Toggle history Opera Android – No support Opera Android No
Toggle history Safari on iOS – No support Safari on iOS 2 – 16.3
Toggle history Samsung Internet – No support Samsung Internet No
Toggle history WebView Android – No support WebView Android No
Toggle history WebView on iOS – No support WebView on iOS 2 – 16.3
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – No support Chrome Android No
Toggle history Firefox for Android – No support Firefox for Android No
Toggle history Opera Android – No support Opera Android No
Toggle history Safari on iOS – No support Safari on iOS 2 – 16.3
Toggle history Samsung Internet – No support Samsung Internet No
Toggle history WebView Android – No support WebView Android No
Toggle history WebView on iOS – No support WebView on iOS 2 – 16.3
Toggle history
Legend Tip: you can click/tap on a cell for more information.
Deprecated. Not for use in new websites. Report problems with this compatibility data on GitHub desktop mobile Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 18
Toggle history Firefox for Android – Full support Firefox for Android 4
Toggle history Opera Android – Full support Opera Android 14
Toggle history Safari on iOS – Full support Safari on iOS 2
Toggle history Samsung Internet – Full support Samsung Internet 1.0
Toggle history WebView Android – Full support WebView Android 4.4
Toggle history WebView on iOS – Full support WebView on iOS 2
Toggle history Toggle history Toggle history Toggle history Toggle history Toggle history Chrome Android – Full support Chrome Android 124
Toggle history Firefox for Android – Full support Firefox for Android 111
Toggle history Opera Android – Full support Opera Android 82
Toggle history Safari on iOS – No support Safari on iOS No
Toggle history Samsung Internet – Full support Samsung Internet 27.0
Toggle history WebView Android – Full support WebView Android 124
Toggle history WebView on iOS – No support WebView on iOS No
Toggle history
Legend Tip: you can click/tap on a cell for more information.
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
.