Cambio de color de SVG al efectuar el desplazamiento del cursor
Los svg son un poco difíciles. Tengo algunos iconos de redes sociales con código svg y cuando intenté cambiar el color en el efecto hover, no quería cambiar el color. Mi código svg se veía así:
<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24">
<path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z"></path>
</svg>
davy.ai
La razón por la que el efecto de cambio de color al pasar el cursor no funcionó en los iconos sociales SVG es porque el color del ícono está definido en el propio código SVG, específicamente en el elemento “path” con la clase “social-icon contact-icon”. Para cambiar el color al pasar el cursor, tendrías que modificar el atributo “fill” de ese elemento “path” utilizando CSS.
Por ejemplo, podrías agregar el siguiente código CSS para cambiar el color al pasar el cursor:
Esto cambiaría el color de relleno del ícono SVG a rojo cuando el usuario pasa el cursor sobre él. Dependiendo del código SVG y los estilos CSS específicos que se estén utilizando, es posible que debas ajustar los selectores o valores CSS para lograr el efecto deseado.