Meilleure réponse
Il existe de nombreuses façons dutiliser / inclure SVG dans votre projet. Selon la manière, la tactique pour recolorer ce SVG dans différents états ou conditions
- SVG en ligne – Incorporer directement le code SVG.
HTML: Voici ce que vous avez obtenu en tant quimage SVG grâce à ce code XML
CSS: La propriété Fill peut être utilisée pour changer la couleur de SVG, car elle est créée en utilisant le code HTML, vous devez donc changer la couleur du chemin SVG créé.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Symbole / Utilisation SVG – Incorporez un fichier de code SVG et récupérez-le à partir de là en utilisant la balise USE HTML
HTML: Cest ainsi que vous pouvez exporter votre image SVG de lautre fichier en utilisant le UTILISEZ la balise HTML.
CSS: De la même manière que le premier vient de changer la technique dexportation est utilisée lorsque vous avez des dizaines dimages SVG et que vous ne voulez pas surcharger votre page HTML, elle doit donc être exportée dans un seul fichier et vous pouvez la récupérer à partir de là.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Images darrière-plan SVG – définissez limage comme dautres formats graphiques.
Cest aussi simple que vous devez appeler deux images ou quelle condition vous voulez selon létat que vous avez sélectionné.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Utilisation de la propriété de filtre CSS – Mais pas très recommandé
Ne pas recommander car ce comportement nest pas favorable sur un autre navigateur .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Merci, veuillez voter pour si cela fonctionne pour vous.
Appréciez lapprentissage !!