L'attribut fill
a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (couleur, dégradé, motif, etc ); 2. pour les animations, il définit l'état final.
Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: <altGlyph>
, <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
, et <tspan>
Pour les animations, il s'applique à cinq éléments: <animate>
, <animateColor>
, <animateMotion>
, <animateTransform>
, et <set>
html,
body,
svg {
height: 100%;
}
< svg viewBox = " 0 0 300 100" xmlns = " http://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>
Attention : <altGlyph>
est déprécié en SVG2 et ne devrait pas être utilisé.
Pour <altGlyph>
, fill
est un attribut de présentation qui définit la couleur du glyphe.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <animate>
, fill
définit l'état final de l'animation.
Valeur
freeze
(Conserver la dernière image de l'animation ) | remove
(Conserver la première image de l'animation )
Valeur par défaut
remove
Animation
Non
Pour <animateColor>
, fill
définit l'état final de l'animation.
Valeur
freeze
(Conserver la dernière image de l'animation ) | remove
(Conserver la première image de l'animation )
Valeur par défaut
remove
Animation
Non
Pour <animateMotion>
, fill
définit l'état final de l'animation.
Valeur
freeze
(Conserver la dernière image de l'animation ) | remove
(Conserver la première image de l'animation )
Valeur par défaut
remove
Animation
Non
Pour <animateTransform>
, fill
définit l'état final de l'animation.
Valeur
freeze
(Conserver la dernière image de l'animation ) | remove
(Conserver la première image de l'animation )
Valeur par défaut
remove
Animation
Non
Pour <circle>
, fill
est un attribut de présentation qui définit la couleur de remplissage du cercle.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <ellipse>
, fill
est un attribut de présentation qui définit la couleur de remplissage du cercle.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <path>
, fill
est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut fill-rule
)
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <polygon>
, fill
est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut fill-rule
)
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
For <polyline>
, fill
est un attribut de présentation qui définit la couleur de remplissage de la forme. (Intérieur définit par l'attribut fill-rule
)
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <rect>
, fill
est un attribut de présentation qui définit la couleur de remplissage du rectangle.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <set>
, fill
définit l'état final de l'animation.
Valeur
freeze
(Conserver la dernière image de l'animation ) | remove
(Conserver la première image de l'animation )
Valeur par défaut
remove
Animation
Non
Pour <text>
, fill
est un attribut de présentation qui définit la couleur du texte.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <textPath>
, fill
est un attribut de présentation qui définit la couleur du texte.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Attention : <tref>
est déprécié en SVG2 et ne devrait pas être utilisé.
Pour <tref>
, fill
est un attribut de présentation qui définit la couleur du texte.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété CSS.
Pour <tspan>
, fill
est un attribut de présentation qui définit la couleur du texte.
Valeur
<paint>
Valeur par défaut
black
Animation
Oui
Note : fill
étant un attribut de présentation, il peut être utilisé comme propriété 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.
Note :
Pour plus d'informations sur les valeurs de context-fill
(et context-stroke
) dans des documents HTML, voir la documentation pour la propriété non-standard -moz-context-properties
.