¡¡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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .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; } <!-- language: lang-html --> <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> <!-- end snippet -->