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

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.