fill

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.

La propriété CSS fill définit comment le contenu textuel SVG et l'intérieur des formes SVG sont remplis ou peints. Si elle est présente, elle remplace l'attribut SVG fill de l'élément.

Les zones à l'intérieur du contour de la forme ou du texte SVG sont peintes. Ce qui est « à l'intérieur » d'une forme n'est pas toujours évident. Les chemins qui définissent une forme peuvent se chevaucher. Les zones considérées comme « intérieures » à ces formes complexes sont précisées par la propriété ou l'attribut fill-rule.

Si des sous-chemins sont ouverts, fill ferme le chemin avant de peindre, comme si une commande « closepath » était incluse pour relier le dernier point du sous-chemin au premier. Autrement dit, fill s'applique aux sous-chemins ouverts dans les éléments path (c'est-à-dire les sous-chemins sans commande closepath) et aux éléments polyline.

Note : La propriété fill ne s'applique qu'aux éléments <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> et <tspan> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs avec un mot-clé */
fill: none;
fill: context-fill;
fill: context-stroke;

/* Valeurs de type <color> */
fill: red;
fill: hsl(120deg 75% 25% / 60%);

/* Valeurs de type <url> */
fill: url("#gradientElementID");
fill: url("star.png");

/* Valeurs de repli de type <url> */
fill: url("#gradientElementID") blue;
fill: url("star.png") none;

/* Valeurs globales */
fill: inherit;
fill: initial;
fill: revert;
fill: revert-layer;
fill: unset;

Valeurs

none: Aucun fill n'est appliqué ; les zones à l'intérieur du contour, s'il y en a, sont transparentes.
context-fill: Utilise la valeur de peinture de fill d'un élément de contexte.
context-stroke: Utilise la valeur de peinture de stroke d'un élément de contexte.
<color>: La couleur du remplissage, comme toute valeur CSS <color> valide.
<url>: Une référence URL vers un élément serveur de peinture SVG, tel qu'un <linearGradient>, <radialGradient> ou <pattern>. La ressource référencée peut être suivie d'une valeur <color> ou none, qui sera utilisée en repli si le serveur de peinture référencé ne se résout pas.

Definition formelle

Valeur initiale	`black`
Applicabilité	SVG shapes and text content elements
Héritée	oui
Valeur calculée	as specified, but with `<color>` values computed and `<url>` values made absolute
Type d'animation	by computed value type

Syntaxe formelle

fill = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<svg-paint> = 
  child               |
  child( <integer> )  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<integer> = 
  <number-token>  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Exemples

Définir les valeurs de remplissage pour les éléments SVG

Cet exemple montre comment une propriété fill est déclarée, l'effet de la propriété, et comment la propriété CSS fill prend le pas sur l'attribut fill.

HTML

Nous avons un SVG avec deux formes complexes définies à l'aide des éléments SVG <polygon> et <path>. Les deux ont l'attribut fill défini à la valeur par défaut black. Nous ajoutons un contour gris foncé #666666 à l'aide de l'attribut SVG stroke, mais nous aurions pu utiliser la propriété stroke.

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="#666666"
    fill="black" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666666"
    fill="black" />
</svg>

CSS

Nous définissons les valeurs de fill sur les formes dans le SVG.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

Résultat

La valeur de la propriété CSS fill remplace la valeur de l'attribut SVG fill, ce qui a pour effet de remplir les deux formes en rouge ; le rouge du polygone est translucide.

Utiliser les valeurs de mot-clé pour le remplissage

Cet exemple montre l'utilisation des valeurs de mot-clé pour fill.

HTML

Nous incluons trois éléments SVG <path> et un élément <marker> qui ajoute un <circle> à chaque point du chemin. Nous définissons le marqueur cercle en noir avec un remplissage gris à l'aide des attributs SVG stroke et fill.

html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
  <path
    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
  <marker
    id="circle"
    markerWidth="12"
    markerHeight="12"
    refX="6"
    refY="6"
    markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
  </marker>
</svg>

CSS

Nous appliquons différentes couleurs de stroke et de fill à chaque chemin. Le premier chemin, celui avec une bordure rouge, a son fill défini sur none. Nous définissons le contour et le remplissage du marqueur cercle avec la même couleur que le contour de l'élément marqué, en utilisant la valeur context-stroke.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

path {
  stroke-width: 2px;
  marker: url("#circle");
}
path:nth-of-type(1) {
  stroke: red;
  fill: none;
}
path:nth-of-type(2) {
  stroke: green;
  fill: lightgreen;
}
path:nth-of-type(3) {
  stroke: blue;
  fill: lightblue;
}
circle {
  stroke: context-stroke;
  fill: context-stroke;
}

Résultat

Remarquez que le premier chemin a un fond transparent car le fill est none, ce qui remplace la valeur par défaut fill de black. Les cercles sont remplis avec la couleur du contour. Si vous changez la valeur en context-fill, les cercles seront transparents, lightgreen et lightblue au lieu de red, green et blue.

Remplissages et valeurs de repli

Cet exemple montre comment inclure une valeur url() avec une valeur de repli comme valeur de fill.

HTML

Nous avons un SVG contenant deux étoiles <polygon> et un <linearGradient> qui va du vert à l'or puis au rouge.

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points="80,10 50,100 120,40 40,40 110,100" />
  <polygon points="180,10 150,100 220,40 140,40 210,100" />
</svg>

CSS

Nous définissons les valeurs de fill sur les polygones dans le SVG, en fournissant une valeur url() et une valeur de repli.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

css

polygon:first-of-type {
  fill: url("#myGradient") magenta;
}
polygon:last-of-type {
  fill: url("#MISSINGIMAGE") magenta;
}

Résultat

La première étoile a un dégradé en arrière-plan. La deuxième étoile utilise la valeur de repli, car l'élément référencé dans le url() n'existe pas.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # FillProperty

Compatibilité des navigateurs

Voir aussi

L'attribut SVG fill
Propriétés de présentation : fill, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor et vector-effect
La propriété opacity
La propriété background-color
Le type de donnée <color>
Le type de donnée <basic-shape>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 3 févr. 2026 par les contributeurs du MDN.

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