Перезапуск SVG анимации через удаление animateTransform

Всем привет. Возникла проблема с svg анимацией. Мне нужно чтобы js останавливал анимацию круга ( для этого я удаляю тег ), а затем возобновлял ее ( возвращаю тег обратно), и анимация начиналась либо с начала, либо, что еще лучше, с того места где остановилась.
Но при возвращении тега анимация продолжается с того момента, где был бы круг если бы я не удалял анимацию. Собственно вопрос в том, что я делаю неправильно.
Заранее спасибо!
const circle = document.getElementsByTagName('circle')[0], animate = ``; let b = true; setInterval(() => { b ? circle.innerHTML = '' : circle.innerHTML = animate; b = !b }, 1000);

Ответ

Добавляем кнопки "GO" и "STOP" старта и остановки анимации. На которые вешаем события onclick='start()' и onclick='pause()'

Добавляем в анимацию команду запуска begin="gO1.click" при клике на кнопке с идентификатором id="gO1" Добавляем скрипт, который управляет остановкой анимации и запуска её вновь с остановленного места.
Ниже полный код приложения:
let flag = 0, svg = document.querySelector('svg'); // Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся), потом подменяем функцию на вызов по "разморозке" анимации let start = function(){ if(flag === 1){ // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль Array.from(svg.querySelectorAll('animateTransform')).forEach(e => e.removeAttribute('begin')); start = _ => svg.unpauseAnimations(); start(); } flag++; } const pause = function(){ svg.pauseAnimations(); }
Скрипт и комментарии к нему не мои. Особая благодарность @Other, который в своё время нашёл его на просторах интернета.
Второй пример анимации отрисовки спирали
let flag = 0, svg = document.querySelector('svg'); let start = function(){ if(flag === 1){ Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin')); start = _ => svg.unpauseAnimations(); start(); } flag++; } const pause = function(){ svg.pauseAnimations(); }
Третий пример анимации с animateMotion
let flag = 0, svg = document.querySelector('svg'); let start = function(){ if(flag === 1){ Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin')); start = _ => svg.unpauseAnimations(); start(); } flag++; } const pause = function(){ svg.pauseAnimations(); }