Справочная информация
Старайтесь не задавать 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>
image
атрибутх
а несх