Анимацию атрибутов внутри SVG можно реализовывать отдельным тегом
Animate
Пример анимации цвета
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="10 10 24 24">
<defs>
<linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
<stop offset="0" stop-color="red">
<animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite" />
</stop>
<stop offset="1" stop-color="yellow">
<animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
Пример анимации офсета
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="10 10 24 24">
<defs>
<linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
<stop offset="0" stop-color="red">
<animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite" />
</stop>
<stop offset="0.5" stop-color="yellow">
<animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
