La fillpropriété en CSS est de remplir la couleur d'une forme SVG.
.eyeball ( fill: red; )Rappelles toi:
- Cela va passer outre un attribut de présentation
- Cela ne remplacera pas un style en ligne, par exemple
Valeurs
La fillpropriété peut accepter n'importe quelle valeur de couleur CSS.
- Couleurs nommées -
orange - Couleurs hexagonales -
#FF9E2C - Couleurs RVB et RVBa -
rgb(255, 158, 44)etrgba(255, 158, 44, .5) - Couleurs HSL et HSLa -
hsl(32, 100%, 59%)ethsla(32, 100%, 59%, .5)
En prime, fillaccepte également les motifs de formes SVG qui sont définis à l'intérieur d'un defsélément:
.module ( fill: url(#pattern); )Voir la propriété Pen fill par CSS-Tricks (@ css-tricks) sur CodePen.
Un cas d'utilisation
Un cas d'utilisation courant pour le fillchangement de la couleur d'un SVG en survol, un peu comme nous le faisons avec le colorstyle des survols de lien.
.icon ( fill: black; ) .icon:hover ( fill: orange; )Voir la propriété Pen fill par CSS-Tricks (@ css-tricks) sur CodePen.
Un autre cas d'utilisation
La fillpropriété est l'une des nombreuses raisons pour lesquelles SVG est une option beaucoup plus flexible que les fichiers image classiques. Prenons les icônes, par exemple.
Nous pourrions avoir le même ensemble d'icônes mais dans deux schémas de couleurs différents. Les fichiers image typiques (tels que JPG.webp, PNG et GIF) nous obligeraient à créer deux versions de chaque icône - une pour chaque jeu de couleurs.
SVG, par contre, nous permet de peindre les icônes en utilisant la fillpropriété CSS :
.icon ( fill: black; ) .icon-secondary ( fill: orange; )Maintenant, nous pouvons réutiliser le même fichier SVG pour plusieurs scénarios en modifiant le nom de classe du chemin ou de la forme:
Voir la propriété Pen fill par CSS-Tricks (@ css-tricks) sur CodePen.
Plus d'information
- Spécifications SVG 1.1
- MDN sur les remplissages et les traits
- Couleur de remplissage SVG en cascade
- Motifs de remplissage SVG par Jacob Jenkov
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Oui | Oui | Oui | Oui | 9+ | 4.4+ | Oui |