原生js中svg viewbox上的element.animate

Question

我目前正在尝试使用.animate方法对svg视图框进行动画处理，

我尝试过

  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
  });

这不起作用，之后我尝试通过将obj设置为

来动画化定义基本矩形的视图框

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

试图像普通矩形一样对其进行动画处理，这也没有用。 有没有办法用.animate做到这一点？还是我被迫使用其他方法制作动画？

问题的jsfiddle：https://jsfiddle.net/juwd29s0/