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

270

14 апреля 2018, 19:53

Всем привет. Возникла проблема с svg анимацией. Мне нужно чтобы js останавливал анимацию круга( для этого я удаляю тег <animateTransform>), а затем возобновлял ее ( возвращаю тег обратно), и анимация начиналась либо с начала, либо, что еще лучше, с того места где остановилась.

Но при возвращении тега анимация продолжается с того момента, где был бы круг если бы я не удалял анимацию. Собственно вопрос в том, что я делаю неправильно.

Заранее спасибо!

const circle = document.getElementsByTagName('circle')[0], 
  animate = `<animateTransform   
          attributeName="transform"  
          type="translate"  
          values="0;460;0" 
          dur="3s" 
          repeatCount="indefinite"/>`; 
let b = true; 
setInterval(() => { 
  b ? circle.innerHTML = '' : circle.innerHTML = animate; 
  b = !b 
}, 1000);

<svg width="500" height="500"> 
    <circle r="20" cy="20" cx="20" fill="#ce3400"> 
          <animateTransform   
          attributeName="transform"  
          type="translate"  
          values="0;460;0" 
          dur="3s" 
          repeatCount="indefinite"/> 
    </circle> 
</svg>