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

Question

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

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

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

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

<div>
<img src="https://i.stack.imgur.com/3xzEW.png" >
</div>

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

Answer 1

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1">
  <!-- Фон -->
 <image height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/>
  <!-- Заяц -->
  <image  id="zayka"  xlink:href="https://i.stack.imgur.com/3xzEW.png" width="100%" height="100%"  opacity="1" />
</svg>   

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

  <image width="40%" height="40%" />

<svg xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1">
      <!-- Фон -->
     <image height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/>
      <!-- Заяц -->
      <image  id="zayka"  xlink:href="https://i.stack.imgur.com/3xzEW.png" width="40%" height="40%"  opacity="1" />
&lt;/svg&gt;   </code></pre>

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

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1">
   <defs>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="5" dy="5" stdDeviation="2"/>
        </filter>
   </defs> 
 <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/>
<image  id="zayka"  transform="translate(200 650)" xlink:href="https://i.stack.imgur.com/3xzEW.png" width="40%" height="40%">
    </image>

</svg>   

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

  <animateTransform attributeName="transform" type="translate" values="200 650;400 650; 200 650" dur="4s" />

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1">
   <defs>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="5" dy="5" stdDeviation="2"/>
        </filter>
   </defs> 
 <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/>
 <g fill="transparent" stroke-width="3" transform="translate(0 100)" filter="url(#shadow)">
   <image  id="zayka" transform="translate(200 650)" 
       xlink:href=" https://i.stack.imgur.com/3xzEW.png" width="30%" height="30%">
    <animateTransform
      attributeName="transform"
   type="translate"
   values="200 650;400 650; 200 650" dur="4s"
   repeatCount="indefinite" />
    </image>   
</svg>   

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

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1280 1024" preserveAspectRatio="xMinYMin meet" border="1">
   <defs>
      <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="5" dy="5" stdDeviation="2"/>
        </filter>
   </defs> 
 <image id="zayka" height="100%" width="100%" xlink:href="https://i.stack.imgur.com/EgAH7.jpg"/>
 <g fill="transparent" stroke-width="3" transform="translate(0 100)" filter="url(#shadow)">
   <image  id="zayka" transform="translate(200 650) skewX(15)" x="0" 
       xlink:href=" https://i.stack.imgur.com/3xzEW.png" width="30%" height="30%">
        <!-- Анимация подпрыгивания зайца -->   
   <animateTransform
      attributeName="transform"
   type="translate"
   values="200 650;200 620;200 650;180 620;180 650;180 620;200 650"
   dur="1.3s"
   repeatCount="indefinite" /> 
       <!-- Анимация поворота зайца -->      
     <animateTransform
      attributeName="transform"
   type="skewX"
   values="20;0;20"
   dur="1.3s" additive="sum"
   repeatCount="indefinite" />
 &lt;!-- Анимация горизонтального перемещения --&gt;
&lt;animate attributeName="x"
  dur="15s"

values="200;250;300;350;300;250;200"
   calcMode="linear" additive="sum"
   repeatCount="indefinite" /> 
    </image>

</svg>
<div class="play-audio" style="margin-top:-50px;margin-left:0px"> 
  <audio class="my_audio" controls preload="true" autoplay="autoplay">
   <source src="https://svg-art.ru/files/potap_i_nastya_-_novyy_god.mp3" type="audio/mpeg">
  </audio>
</div>

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

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

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

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