1. Web
  2. SVG (Scalable Vector Graphics)
  3. Reference
  4. Référence des attributs SVG
  5. fill

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

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
SVG Animations Level 2
# FillAttribute
Scalable Vector Graphics (SVG) 2
# SpecifyingFillPaint

Compatibilité des navigateurs

svg.elements.animate.fill

svg.elements.animateMotion.fill

svg.elements.animateTransform.fill

svg.elements.circle.fill

svg.elements.ellipse.fill

svg.elements.path.fill

svg.elements.polygon.fill

svg.elements.polyline.fill

svg.elements.rect.fill

svg.elements.set.fill

svg.elements.text.fill

svg.elements.textPath.fill

svg.elements.tspan.fill

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.

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content