Анимация градиента внутри SVG?

Question

[rat_fucker]

Собственно, как реализовать анимацию градиента в svg коде с помощью keyframes?
Есть градиент linear-gradient (45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%), который заполняет svg-изображение. Как заставить его двигаться?
Код ниже.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="24.395" viewBox="0 0 400 287">
  <defs>
    <style>
      .cls-1 {
        fill-rule: evenodd;
        fill: url(#linear-gradient);
			animation: x 15s ease infinite;
      }
		 
		 @keyframes x {
0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
        }
    </style>
    <linearGradient id="linear-gradient" x1="56.5" y1="287" x2="343.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f09433"/>
      <stop offset="0.25" stop-color="#e6683c"/>
      <stop offset="0.5" stop-color="#dc2743"/>
      <stop offset="0.75" stop-color="#cc2366"/>
      <stop offset="1" stop-color="#bc1888"/>
    </linearGradient>
  </defs>
  <path class="cls-1" d="M196,7c9.509,1.576,19.244,4.725,22,13,7,8.987-.365,24.476-7,29l-8,3v8c2.26,3.747.8,8.887,2,14,3.284,13.977,2.432,28.97,6,44,6.458,27.2,11.867,53.589,26,73,2.983,4.1,6.112,7.586,12,10,36.526,0.848,54.767-13.747,75-29l12-13a227.127,227.127,0,0,0,29-27c-4.891-5.648-5.507-9.725-5-16,2.088-9.819,7.9-9.908,10-12,7.749-.662,11.613.284,18,2,3.692,4.6,8,12.05,3,22-3.773,5.558-8.622,7.322-24,7-4.087,13.637-17.663,30.068-25,42-11.854,19.28-20.973,44.271-27,69-0.333,0-11.667-4-12-4-12.069-4.331-19.629-5.775-33-8-37.2-6.188-96.361-10.952-134-2-8.638,2.055-18.722,2.438-28,5-7.537,2.081-15.394,5.292-24,6v-2c-1.7-4.788-2.174-10.6-4-16-2.147-6.351-5.072-13.33-8-20-10.872-24.766-28.112-45.709-40-70-10.048.457-16.658-.6-21-6-3.6-4.065-5.164-12.109-2-18,6.09-6.646,8.6-10.485,26-4,2.556,3.98,7.69,9.39,5,18-0.972,3.109-3.965,5.362-4,7,12.645,20.892,58.718,52.784,83,63,10.311,4.338,29.18,7.461,39,1,29-19.081,37.819-95.909,38-145-18.311-4.1-26.547-34.248-6-41C191.579,8.782,194.443,8.251,196,7ZM86,257c14.254-2.637,29.666-7.6,43-11,5.7-1.415,14.974-1.907,22-3,32.584-8.333,78.627-2.443,113,3,12.606,2,44.6,6.76,48,15l-4,14c-55.444-22.284-162.952-22.755-218,0C88.667,268.667,87.333,263.333,86,257Z"/>
</svg>

Answer 1

[strelok011]

Анимацию атрибутов внутри 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>