Анимация перемещения image в svg

Question

<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="100" height="100" x="150" y="10" xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo1" />
    <image id="orange-circle" width="100" height="100" x="0" y="0" xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo2" />
    <!-- <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> -->
    <animate 
    xlink:href="#orange-circle" 
    attributeName="cx" 
    from="50" to="450" dur="1s" fill="freeze" />
</svg>

У меня есть код который вставляет 2 картинки и код анимации, который должен переместить картинку вправо.

Анимация работает с circle но не работает с image.

Что я делаю не правильно?

Answer 1

Справочная информация

Старайтесь не задавать id через дефис между словами #orange-circle В командах анимации Firefox воспринимает это, как вычитание и анимация не работает. Это давно известный баг FF

Команды анимации можно писать, как вне тела кода, анимамированного объекта, так и внутри него. Надежнее и нагляднее последний способ написания анимации внутри объекта

<image .....>
<animate .... />
</image>

Обратите внимание на первую строчку, - тег image не закрыт и обязательно закрывающий тег </image> после окончания команды анимации.

Перемещения картинки.

Можно изменять параметр x, но это сильно нагружает видеокарту, так идет постоянный пересчет редеринга при перемещении на каждый пиксель.
Как указал в комментариях @Stranger in the Q лучше использовать transform="translate(x,y)"

Перемещение по X
Изменяем только координату x в команде translate

<animateTransform attributeName="transform" type="translate" 
  begin="0s" dur="4s" values="0,10;200,10;0,10" repeatCount="indefinite" />

<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="100" height="100" x="150" y="10" xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo1" />
    
	<image id="orange-circle" width="100" height="100" x="0" y="0" 
	xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo2" >
     <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="0,10;200,10;0,10" repeatCount="indefinite" /> 
	</image>  

  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange"> 
    <animate 
    attributeName="cx" 
    from="50" to="450" dur="2s" fill="freeze" repeatCount="indefinite" />
	</circle>
</svg>

Перемещение по обоим координатам сразу

Изменяем обе координаты x, y в команде translate

<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="100" height="100" x="150" y="10" xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo1" />
    
	<image id="orange-circle" width="100" height="100" x="0" y="0" 
	xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo2" >
     <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="0,10;200,10;200,100;10,100;0,10" repeatCount="indefinite" /> 
	</image>  

  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange"> 
    <animate 
    attributeName="cx" 
    from="50" to="450" dur="2s" fill="freeze" repeatCount="indefinite" />
	</circle>
</svg>

Перемещение группы объектов

В примере ниже круг и одно из изображений оборачиваются в групповой тег <g> и анимация применяется в целом для группы

<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image width="100" height="100" x="150" y="10" xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo1" />
  
  <g>
	<image id="orange-circle" width="100" height="100" x="0" y="0" 
	xlink:href="http://via.placeholder.com/100x100/33ff99/555555?text=logo2" >
 	</image>  
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange"/> 
   <animateTransform attributeName="transform" type="translate" begin="0s" dur="4s" values="0,10;200,10;200,100;10,100;0,10" repeatCount="indefinite" /> 
  </g>  
	
</svg>

БЛОГ НА HUSL

Анимация перемещения image в svg

Ответы (1 шт):

Перемещения картинки.