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>

<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

Spécification Statut Commentaire
SVG Animations Level 2
La définition de 'transform' dans cette spécification.
Brouillon de l'éditeur Définition pour les animations.
Scalable Vector Graphics (SVG) 2
La définition de 'fill' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et le texte.
Ajoute context-fill et context-stroke.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'fill' dans cette spécification.
Recommendation Définition initiale pour les animations.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'fill' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,