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>` (en-US), `<tref>` (en-US), et `<tspan>`

Pour les animations, il s'applique à cinq éléments: `<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, et `<set>` (en-US)

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```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>` (en-US), `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>` (en-US), `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>` (en-US) est déprécié en SVG2 et ne devrait pas être utilisé.

Pour `<tref>` (en-US), `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 |
| --- |
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**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`.