Skip to main content
1 de 2

¿Cómo cambiar el color de un svg por medio del hover de otro elemento?

¡¡Hola a todos!!

He tenido una dificultad al crearle una transición de color a un svg cuando posiciono el cursor del ratón por encima del link. El resultado que busco es que el color del icono cambie cuando el se pase el cursor por el link, pero con una transición. Muchas gracias a todos los que quieran ayudarme.

.text-center {
    text-align: center;
}

.elements-center svg {
    height: 25px;
    transition: all 0.5s;
    width: 25px;
}

.elements-center {
    display: flex;
    justify-content: center;
}

.elements-center a {
    margin-left: 5px;
    margin-right: 5px;
}
<section class="text-center">
  <h4>CONTACTO</h4>
  <div class="elements-center">
    <a href="#">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><title>email-round</title><path d="M61.44,0A61.46,61.46,0,1,1,18,18,61.21,61.21,0,0,1,61.44,0ZM32.22,79.39,52.1,59.46,32.22,43.25V79.39ZM54.29,61.24,33.79,81.79H88.91L69.33,61.24l-6.46,5.51h0a1.42,1.42,0,0,1-1.8,0l-6.78-5.53Zm17.18-1.82L90.66,79.55V43.07L71.47,59.42ZM34,41.09l27.9,22.76L88.65,41.09Zm65.4-17.64a53.72,53.72,0,1,0,15.74,38,53.56,53.56,0,0,0-15.74-38Z"/>
                            </svg>
    </a>
    <a href="">
      <p id="email">[email protected]</p>
    </a>
  </div>
</section>