Есть объект, который я анимирую с помощью animateMotion
. После клика на кнопку остановки анимации stop
объект должен вернуться на прежнее место, где он бы отрендерился без той же анимации, в данном случае x
& y
= 0, но при остановке анимации объект сохраняет своё местоположение, чего фактически не должно быть. Может я неправильно пытаюсь отключить анимацию, изменяю атрибут(xlink:href
), принимающий объект, который будет двигаться вдоль пути, то есть квадрат, который есть в примере ниже. Может быть есть какие-то встроенные функции для SVG
, в чём я очень сильно сомневаюсь, хотелось бы услышать вразумительный ответ по этому поводу.
Минимальный пример:
document.querySelector('button').onclick = () => {
document.querySelector('#AM').setAttribute('xlink:href', ' ');
};
<div class="wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 0.0625rem solid">
<g class="main-area">
<path d="M0 75L300 75" fill="none" stroke="red" id="AMP"/>
<rect x="0" y="0" width="50" height="50" id="TrO" transform="translate(0 -25)"/>
<animateMotion id="AM" xlink:href="#TrO" begin="0s" dur="3s" repeatCount="indefinite">
<mpath xlink:href="#AMP"/>
</animateMotion>
</g>
</svg>
<button>Stop</button>
</div>
SVG
? Вот незадача=)