Как заменить svg изображение на анимированное при наведении на кнопку/линк?

Question

[postya]

Имеется одно svg изображение
Имеется точно такое же изображение, но уже анимированное
Имеется линк. слева от названия в линке есть svg изображение.
Я хочу анимировать svg. При наведении на линк надо подставить вместо статичной картинки, анимированную, тем самым как бы анимировать svg картинку.
Как это можно сделать?

Как я добавляю svg:

<a href="#" target="_blank">
              <img
                src="../assets/images/projects/icons/buttons/eye.svg"
                alt="eye"
                class="link-img"
              />
              <span>View</span>
            </a>

Изображения

Answer 1

[Степан Воеводин]

А зачем тебе их подменять? возьми сразу анимированную и в svg-анимацию пропиши, чтоб она стартовала по ховеру. Как-то так примерно - begin="[id-svg].mouseenter"

Comments

[postya]

Что такое id-svg? Где этот Id искать?

[Степан Воеводин]

Можно и без ID, просто пропихнуть анимацию в сам элемент.

Вот простенький пример SVG, который я делал, чтоб анимация начаналась при наведении

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.5 64">
<g>
  <path d="M33 56l-3.7-9.7s25.2-3.4 29.2-3.4C65.4 42.9 33 56 33 56z" opacity=".2"/>
  <path d="M27.8 38.3C30.3 37.7 31 37 31 37l-6.6-15H27L20 5l-7 17h2.6L9 37s.7.7 3.2 1.3L5 55s2 4 15 4 15-4 15-4l-7.2-16.7z"/>
  <path d="M28.6 38.2C31 37.6 31 37 31 37l-6-15h2L20 5s2.2 7.1 1.6 7.5c-1.3.9 3.4 6.6 2.4 7.5-.7.7-2.3-.3-3.7.7-.3.2 1 1.3-1.5 1.2-6.6-.3.7-.1 4.3 3.1 3.9 3.5 5.9 13.2 3.1 12-6-2.5-11.4 3.6-14.2 1 0 0 .2 3.3 4.7 1.3 5.1-2.2 12-.7 9.3 1.7-4.9 4.3 6.7 15.8 6.7 15.8C34.6 55.9 35 55 35 55l-6.4-16.8z"/>
  <animateTransform 
		attributeName="transform"
		type="skewY" 
		values="-3 ; 3; -3"
		begin="mouseenter"
		dur="4s"	
		repeatCount="indefinite"
		restart="always"
		/>
</g>  
</svg>