Propriété CSS fill
La propriété CSS fill sert à remplir la couleur d'une forme SVG. Cette propriété est dépréciée. Voir des exemples.
La propriété CSS fill sert à définir la couleur intérieure d'une forme SVG. Elle accepte des valeurs de couleur, none, currentColor et des références url().
Vous pouvez trouver des couleurs web avec notre outil Color Picker et dans la section Couleurs HTML.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Toutes les formes SVG, le texte et les éléments textPath. |
| Hérité | Oui. |
| Animable | Oui. |
| Version | SVG 1.1 |
| Syntaxe DOM | object.style.fill = "#8ebf42"; |
Syntaxe
Syntaxe de la propriété CSS fill
fill: color | none | currentColor | url(<id>) | initial | inherit;Exemple de la propriété fill :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
circle {
fill: #1c87c9;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
</html>Résultat
Exemple de la propriété fill avec la valeur "color" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-1 {
fill: red;
}
.fill-2 {
fill: #228B22;
}
.fill-3 {
fill: rgb(255, 165, 0);
}
.fill-4 {
fill: hsl(248, 53%, 58%)
}
</style>
</head>
<body>
<h3>CSS | fill</h3>
<div class="container">
<svg viewBox="0 0 800 800">
<circle class="fill-1" cx="150" cy="150" r="50" />
<circle class="fill-2" cx="300" cy="150" r="50" />
<circle class="fill-3" cx="450" cy="150" r="50" />
<circle class="fill-4" cx="600" cy="150" r="50" />
</svg>
</div>
</body>
</html>Exemple de la propriété fill avec la valeur "currentColor" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text-container {
color: #1c87c9;
}
.fill-current {
fill: currentColor;
}
</style>
</head>
<body>
<div class="text-container">
<svg viewBox="0 0 100 100">
<circle class="fill-current" cx="50" cy="50" r="50" />
</svg>
</div>
</body>
</html>Exemple de la propriété fill avec des motifs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.fill-pattern-1 {
fill: url(#pattern-one);
}
.fill-pattern-2 {
fill: url(#pattern-two);
}
</style>
</head>
<body>
<h3>Fill</h3>
<div class="container">
<svg viewBox="0 0 800 800">
<defs>
<pattern id="pattern-one" viewBox="0 0 11 11" width="15%" height="15%" patternUnits="objectBoundingBox">
<circle r="10" fill="green" />
</pattern>
<pattern id="pattern-two" viewBox="0 0 9 9" width="15%" height="15%" patternUnits="objectBoundingBox">
<rect height="4" width="4" fill="red" />
</pattern>
</defs>
<circle class="fill-pattern-1" cx="150" cy="150" r="55" />
<circle class="fill-pattern-2" cx="300" cy="150" r="55" />
</svg>
</div>
</body>
</html>SVG et la propriété fill
La propriété fill rend SVG plus flexible que les fichiers image standard. Par exemple, les fichiers image standard tels que JPG, GIF ou PNG nécessitent des versions séparées pour différents schémas de couleurs. Avec SVG, nous pouvons modifier les couleurs des icônes grâce à cette propriété sans avoir besoin de fichiers supplémentaires. Vous pouvez le faire à l'aide du code ci-dessous :
Valeurs de la propriété CSS fill
.icon {
fill: pink;
}
.icon-secondary {
fill: yellow;
}Valeurs
| Valeur | Description |
|---|---|
| color | Indique la couleur de la forme. Par défaut, il s'agit de la valeur calculée color de l'élément. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl() et hsla() peuvent être utilisés. Elle accepte également les références url() vers des motifs ou des dégradés définis dans la section <defs>. |
| none | Rend la forme transparente. |
| currentColor | Définit la couleur de remplissage sur la couleur de texte actuelle de l'élément. |
| initial | Force la propriété à utiliser sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |