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

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.