setAttribute平滑过渡

Question

我尝试用纯javascript重新创建这个smil动画。

​

<svg viewBox="0 0 600 600">
<path id="foo" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="black">
  <animate
       attributeName="d"  to="M500 500 C 20 20, 40 20, 50 10"
       dur="5s" repeatCount="indefinite" />
  </path>
</svg>

​

这里的问题是，当我使用setAttribute在单击时重新创建动画时，动画会突然出现

var path = document.getElementById('foo');
path.addEventListener("click", function(){path.setAttribute('d','M500 500 C 20 20, 40 20, 50 10');});

我不知道如何让它像smil一样流畅，有没有办法让它像纯js一样呢？

Answer 1

您可以在单击事件上开始动画。

​

<svg viewBox="0 0 600 600">
<path id="foo" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="black">
  <animate
       attributeName="d"  to="M500 500 C 20 20, 40 20, 50 10"
       dur="5s" begin="0s;foo.click" repeatCount="indefinite" />
  </path>
</svg>

​