Mejor respuesta
Hay muchas formas diferentes de usar / incluir SVG en su proyecto. Dependiendo de la forma, la táctica para cambiar el color de ese SVG en diferentes estados o condiciones
- Inline SVG: incrustar código SVG directamente.
HTML: esto es lo que obtuviste como una imagen SVG debido a este código XML
CSS: la propiedad de relleno se puede usar para cambiar el color de SVG, ya que se crea usando el código HTML, por lo que debe cambiar el color de la ruta creada por SVG.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. Símbolo / Uso SVG: inserte el archivo de código SVG y recupérelo desde allí usando la etiqueta USE HTML
HTML: esta es la forma en que puede exportar su imagen SVG desde el otro archivo usando USE etiqueta HTML.
CSS: De la misma manera que la primera, acaba de cambiar la técnica de exportación de esta se utiliza cuando tienes docenas de imágenes SVG y no quieres saturar tu página HTML, por lo que es necesario exportarla en un archivo y puedes recuperarla desde allí.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. Imágenes de fondo SVG: configure la imagen como otros formatos gráficos.
Esto es tan simple como que necesita llamar a dos imágenes o la condición que desee según el estado que seleccionó.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. Uso de la propiedad de filtro CSS, pero no muy recomendable
No se recomienda porque no es un comportamiento de apoyo en un navegador diferente .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Gracias, por favor, vote a favor si eso le funciona.
¡Disfrute aprendiendo!