¡¡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 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>