Propriété CSS fill
La propriété CSS fill est utilisée pour 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 HTML colors.
| Valeur initiale | currentColor |
|---|---|
| S'applique à | Toutes les formes SVG, ainsi qu'aux éléments text et textPath. |
| Héritée | 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 comme 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 à l'aide de cette propriété sans avoir besoin de fichiers supplémentaires. Vous pouvez le faire en utilisant le 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 color calculée de l'élément. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl() et hsla() peuvent être utilisés. Elle accepte également des 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 du texte actuelle de l'élément. |
| initial | Fait utiliser à la propriété sa valeur par défaut. |
| inherit | Hérite la propriété de l'élément parent. |
Practice
What properties does the 'fill' property in CSS affect in svg elements?