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

html
<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

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.

ellipse

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.

path

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.

polygon

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.

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

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.

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

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.

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

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.

tspan

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.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Compatibilité des navigateurs

svg.elements.circle.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.ellipse.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.path.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.polygon.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.polyline.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.rect.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.text.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.textPath.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

svg.elements.tref.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
Deprecated
context-fill value
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.

svg.elements.tspan.fill

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill
context-fill value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

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.