Как анимировать растровую картинку внутри SVG

#css #css3 #html5 #svg #анимация

У меня есть несколько растровых изображений в формате *.png
Одно изображение я хочу использовать как фон  



Другие растровые изображения хочу использовать, как персонажи анимации 

Например заяц с гитарой прыгающий под ёлочкой под музыку: 

 



 body {
 background-image:url(https://i.stack.imgur.com/EgAH7.jpg);
 background-size:cover;
}







Как сделать анимацию персонажа и при этом добиться, чтобы вёрстка была на 100% адаптивной.
    

Ответы

Ответ 1

Одна из возможных техник решения вопроса адаптивности.    

Данная техника позволяет легко масштабировать и позиционировать изображения, как
растровых форматов, так и векторных внутри svg. 


Добавляем оба растровых изображения внутри файла svg. С помощью этого
решения гарантированно получаем полную адаптивность. В шапке svg
файла добавляем только viewBox равного по размерам изображения
ёлочки, которая будет выступать в роли фона.




	  





Уменьшаем размер изображения зайца для этого устанавливаем для
изображения

   




	  





Позиционируем изображение  transform="translate(200 650)" 




	  





Добавляем команду анимации движения взад - вперед  

  




	  





Усложняем анимацию, добавляем подпрыгивание к горизонтальному
перемещению зайца
Добавляем музыкальный трек и подбираем временные атрибуты анимации, чтобы попасть
в ритм музыки   





	
			  






Начинаем готовиться к Новому 2020 году!

Музыкальная открытка готова!   

Звучит (после запуска плеера) трек Потап и Настя Каменских - Новогодняя     

Можно заменить изображение на свою фотографию и послать кому-нибудь :)