SVG BeginElement 不会重置动画时钟

问题描述

我有以下代码在加载文档期间起作用:

      <animate
        id="animation1"
        attributeName="opacity"
        from="0"
        to="0.5"
        dur="1s"
        begin="0s; 2s;"
        end="1s; 3s;"
      />
      <animate
        id="animation2"
        attributeName="opacity"
        from="0.5"
        to="0"
        dur="1s"
        begin="1s; 3s;"
        end="2s; 4s;"
      />

然后我尝试使用以下代码重新启动动画:

document.querySelectorAll("animate").forEach(element => {
  if ('beginElement' in element) {
    element.beginElementAt(0);
  }
  console.log("Element time: " + element.getCurrentTime());
}); 

不幸的是,动画不起作用,我注意到计时器没有被重置。这是在 Windows 10 中最新版本的 Google Chrome 中运行的。有什么想法会出什么问题吗?谢谢。

解决方法

解决了我自己的问题,感谢 enxaneta 提供的提示,使用值工作。

      <animate id="animation1" attributeName="opacity"
      values="0;0.5;0" dur="2s"
      repeatCount="2"/>