element.animate в svg viewbox в нативном js

Question

В настоящее время я пытаюсь анимировать svg viewbox с помощью метода .animate,

я пытался

  obj.animate([
    { viewbox: 'min-x(' + viewBoxX0 + ') min-y(' + viewBoxY0 + ') width(' + viewBoxSize0 + ') height(' + viewBoxSize0 + ')' },
    { viewbox: 'min-x(' + viewBoxX1 + ') min-y(' + viewBoxY1 + ') width(' + viewBoxSize1 + ') height(' + viewBoxSize1 + ')' }
  ], {
    duration: time,
    iterations: 1
  });

, который не работал, после этого я пытался анимировать viewbox, определяябазовый прямоугольник, установив для obj значение

var obj = document.querySelector('#svg0').viewBox.baseVal;

, пытаясь анимировать его как обычный прямоугольник, что также не работает.Есть ли способ сделать это с .animate?Или я вынужден использовать другие методы для его анимации?

jsfiddle для задачи: https://jsfiddle.net/juwd29s0/