fill
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>
Exemple
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- Remplir avec une simple couleur -->
<circle cx="50" cy="50" r="40" fill="pink" />
<!-- Remplir avec un dégradé -->
<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)" />
<!-- Définit l'état final d'un cercle animé -->
<circle cx="250" cy="50" r="20">
<animate
attributeType="XML"
attributeName="r"
from="0"
to="40"
dur="5s"
fill="freeze" />
</circle>
</svg>
altGlyph
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.
animate
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 |
animateColor
Attention : <animateColor>
est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser <animate>
à la place.
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 |
animateMotion
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 |
animateTransform
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 |
circle
ellipse
path
polygon
polyline
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.
rect
set
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 |
text
textPath
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.
tref
tspan
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |
Compatibilité des navigateurs
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
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
.