Вернуть объект на прежнюю позицию SVG

#javascript #html #css #svg #анимация

Есть объект, который я анимирую с помощью animateMotion. После клика на кнопку остановки
анимации stop объект должен вернуться на прежнее место, где он бы отрендерился без
той же анимации, в данном случае x & y = 0, но при остановке анимации объект сохраняет
своё местоположение, чего фактически не должно быть. Может я неправильно пытаюсь отключить
анимацию, изменяю атрибут(xlink:href), принимающий объект, который будет двигаться
вдоль пути, то есть квадрат, который есть в примере ниже. Может быть есть какие-то
встроенные функции для SVG, в чём я очень сильно сомневаюсь, хотелось бы услышать вразумительный
ответ по этому поводу.

Минимальный пример:



document.querySelector('button').onclick = () => {
  document.querySelector('#AM').setAttribute('xlink:href', '  ');
};

  
  




    

Ответы

Ответ 1

Конечно, не самый лучший вариант, но работу свою делает. 



document.querySelector('button').onclick = () => {
  const am = document.querySelector('#AM');
  am.querySelector('mpath').setAttribute('xlink:href', '#AMP1');
  am.setAttribute('repeatCount', '0');
};

  
  





Также есть специальный метод endElement(), который останавливает анимацию.



document.querySelector('button').onclick = () => {
  document.querySelector('#AM').endElement();
};

  
  



Ответ 2

Pure SVG

Можно попробовать другой вид анимации, где будет анимироваться атрибут "x" координата
ыерхнего левого угла прямоугольника.

  


В зависимости от поставленной задачи кнопку Play можно убрать. 




  
  




Вариант с анимацией animateMotion  




  

 




Update 9.12.2018   

Отформатирован SVG код в стиле CSS правил для более легкого восприятия