Fill - Propriété CSS

fill

Résumé des caractéristiques de la propriété `fill`

Description rapide

Définit l'ensemble des paramètres de remplissage d'une forme (couleur, etc).

Statut

Problèmes de compatibilité ⚠

Utilisable sur

SVG

Valeurs prédéfinies

currentcolor

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Oui.

Type d'animation

Voir les propriétés individuelles.

Module W3C

Module CSS - Traits et remplissages

Références (W3C)

🡇

🡅

CSS Fill and Stroke Module Level 3

Statut du document: WD (document de travail)

Scalable Vector Graphics (SVG)

Statut du document: CR (document candidat à la recommandation)

Scalable Vector Graphics (SVG)

Statut du document: REC (recommandation)

Description de la propriété `fill`.

⚠

A l'heure actuelle, fill n'est bien reconnue que pour définir la couleur de remplissage

Initialement (encore actuellement pour de nombreux navigateurs), la propriété fill définissait la couleur de remplissage d'une forme en SVG. Mais le niveau 3 de la spécification CSS Fill and Stroke Module définit fill comme une propriété résumée regroupant les valeurs des propriétés suivantes :

fill-color : couleur du remplissage.
fill-image : image utiliser pour le remplissage.
fill-origin : la boîte servant de référence pour positionner l'image.
fill-position : positionnement de l'image de remplissage.
fill-repeat : répétition de l'image de remplissage.
fill-size : dimensions de l'image de remplissage.

Toutes ces propriétés sont impactées par une déclaration de fill, même celles dont les valeurs ne seraient pas spécifiées. Les propriétés ignorées sont généralement remises à leur valeur initiale, mais il y a deux exceptions : fill-color et fill-origin.

Propriété	Valeur si non spécifiée
`fill-color`	`transparent`
`fill-image`	`none` (valeur initiale)
`fill-origin`	`fill-box`
`fill-position`	`0` (valeur initiale)
`fill-repeat`	`repeat` (valeur initiale)
`fill-size`	`auto` (valeur initiale)

Rappelons qu'une forme en SVG comport deux couleurs : une couleur de remplissage, et une couleur pour la bordure. Sur l'exemple ci-dessous, la couleur de remplissage est du vert clair (lightGreen) et la couleur de la bordure est bleu.

D'autre part, le remplissage s'étend jusqu'au milieu de la bordure. cette particularité est souvent invisible car la bordure est dessinée par dessus le remplissage. Mais dans le cas d'une bordure transparente ou en pointillés, le chevauchement de la moitié de la bordure sur le remplissage apparaît.

Simulateur avec la propriété `fill`.

Le simulateur applique la propriété fill à l'image SVG ci-dessous. Pour le moment cela ne fonctionne que avec une couleur.

fill :

currentcolor

Prise en charge de `fill` par les navigateurs.

Le tableau ci-dessous résume la prise en charge de la propriété fill dans sa syntaxe initiale : définition de la couleur de remplissage. La compatibilité des navigateurs avec la nouvelle syntaxe est quasiment inexistante (2024).

Colonne 1

Support par les navigateurs de la propriété fill en tant que propriété pour définir la couleur des remplissages (syntaxe initiale).

Propriété
fill

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Edge

Opéra

Samsung Internet

Opéra Mobile

QQ Browser

Baidu Browser

Safari sur IOS

Safari

Firefox

Chrome

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Historique de la propriété `fill`.

SVG (Scalable Vector Graphics)

Première présentation de la propriété fill.

30 Octobre 2001
Document de travail.
30 Avril 2002
Candidat à la recommandation.
09 Juin 2011
Proposé à la recommandation.
16 Août 2011
Recommandation.
SVG (Scalable Vector Graphics)

Pas de modifications de la propriété fill.

28 Août 2012
Document de travail.
15 Septembre 2016
Candidat à la recommandation.
Module CSS - Traits et remplissages - Niveau 3

La propriété fill est maintenant le résumé pour plein d'autres propriétés : fill-color, fill-image, etc.

13 Avril 2017
Document de travail.

Voir aussi, concernant SVG.

Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module. Après avoir fait partie de la spécification SVG11 et SVG2, fill est maintenant décrit dans ce module, ainsi que les propriétés suivantes.