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

Есть объект, который я анимирую с помощью animateMotion. После клика на кнопку остановки анимации объект должен вернуться на прежнее место, где он бы отрендерился без той же анимации, в данном случае 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>