2

<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.

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

4
  • 1
    у image атрибут х а не сх 13 апр 2020 в 22:02
  • А если нужно будет и по x и по у перемещать, это для каждого вектора отдельная анимация?
    – test
    13 апр 2020 в 22:08
  • это можно сделать даже без smil - просто на keyframes 14 апр 2020 в 2:48
  • @test есть еще атрибут transform 14 апр 2020 в 7:16

1 ответ 1

2

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

Старайтесь не задавать 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>

2
  • @test Добавлен ответ. 14 апр 2020 в 17:47
  • @test у вас есть вопросы, что-то не понятно? Спрашивайте 15 апр 2020 в 21:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.