Fill-color - Propriété CSS

Schéma de la syntaxe de fill-color.

Description des termes utilisés sur le schéma :

• name est le nom d'une couleur. Voir la liste des couleurs nommées : Nuancier.
• #xxxxxx est le code hexadécimal d'une couleur.
• color est une couleur définie par l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété fill-color.

Dans le contexte d'une image SVG, la propriété fill-color définit la couleur du remplissage, c'est à dire de la zone comprise entre les bordures.

Dans les exemples ci-après, le remplissage est en vert clair, et la bordure en bleu vif. Remarque : l'épaisseur de la bordure du cercle a été fixée à 10 pixels pour que les deux couleurs soient bien visibles. La bordure est semi-transparente, ce qui laisse voir que la couleur de remplissage s'étend jusqu'au milieu de la bordure. La troisième figure nous montre que les formes ouvertes ont quand même un remplissage.

Si une image est définie pour le remplissage avec fill-color, la couleur ne doit pas être représentée sauf si l'image est non trouvée ou incorrecte. Ce qui signifie que, même si l'image comporte des parties transparentes, la couleur ne sera pas visible à travers ces transparences.

Il faut noter également que la valeur de currentColor n'est pas modifiée ni par fill-color. Seule la propriété color permet de modifier currentColor.

Reportez-vous également à la description des propriétés fill et stroke-color.

Valeurs pour fill-color.

• fill-color: currentColor;

  currentColor est la valeur initiale de fill-color.
  currentColor est définie par la propriété color. Initialement currentColor vaut black.

• fill-color: #add8e6; fill-color: lightBlue; fill-color: rgb(173 216 230);

  fill-color définit la couleur du remplissage, c'est à dire la couleur interne à la forme. Le remplissage s'étend jusqu'au milieu de la bordure. Cela peut être utile à connaître si cette dernière est transparente.

  La couleur peut être spécifiée avec n'importe laquelle des syntaxes reconnues par CSS :

  • Le code hexadécimal de la couleur.
  • Le nom d'une couleur. Voir Nuancier.
  • Une couleur spécifiée avec l'une des fonctions suivantes : rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().
• fill-color: initial; (currentcolor) fill-color: inherit; fill-color: revert; fill-color: revertLayer; fill-color: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété fill-color.

Le simulateur vous permet de jouer avec la couleur du remplissage et celle du contour, sur une forme géométrique et sur du texte.

Compatibilité des navigateurs avec fill-color.

fill-color n'est pas encore prise en charge par les navigateurs. Dans l'attente, vous pouvez utiliser la propriété fill pour définir la couleur de remplissage des formes en SVG.

1

Propriété
fill-color

Estimation de la prise en charge globale.

17%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété fill-color.

• Module CSS - Traits et remplissages - Niveau 3

  Introduction de la propriété fill-color pour définir la couleur d'une forme SVG. Cette propriété fait partie de la propriété résumée fill.
  

  13 Avril 2017

  Document de travail.

  

  

  

Voir aussi, concernant SVG.

Le module CSS dénommé CSS Fill and Stroke Module regroupe toutes les informations concernant les bordures et les remplissages. fill-color est décrite dans ce module, ainsi que les propriétés suivantes :

Propriétés :