Implementé un degradado animado básico en el texto usando CSS puro (y algunos elementos DOM adicionales), como se ve aquí:
.container { position: relative; display: block; width: 300px; height: 300px; font-size: 60px; } .base { position: absolute; display: flex; justify-content: center; align-items: center; left: 0px; right: 0px; top: 0px; bottom: 0px; } .overlay { position: absolute; display: flex; justify-content: center; align-items: center; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: red; background: linear-gradient(315deg, red 0%, green 74%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 2s linear infinite; opacity: 0; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } .overlay:hover { opacity: 1; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; } @keyframes shine { to { background-position: 200% center; } } <span class="container"> <span class="base">a</span> <span class="overlay">a</span> </span> Intenté reemplazar las partes con SVG y usar la propiedad CSS background-clip , pero parece que no hace nada en los SVG. ¿Cómo puedo hacer este mismo efecto de degradado de texto en SVG (al pasar el mouse)?
El SVG que tengo es un búho complejo dibujado a mano exportado como SVG (parece un boceto), por lo que utiliza muchas rutas complejas.
Idealmente, esto podría hacerse en un SVG cargado con CSS, en lugar de usar algo como esto .