SVG BeginElement 不会重置动画时钟答案

【问题标题】：SVG BeginElement does not reset the clock for animationSVG BeginElement 不会重置动画时钟
【发布时间】：2021-04-22 19:58:38
【问题描述】：

我有以下代码在加载文档期间有效：

      <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 中运行的。有什么想法会出错吗？谢谢。

【问题讨论】：

很高兴看到一个可以理解您想要实现的工作示例。观察： 1. 显然你正在使用 2 个元素 <animate> 动画相同的不透明度：为什么？ 2. 您可以使用values 列表来代替from 和to 属性。 3. 我会将 beginElement 与事件侦听器一起使用。否则，您将在动画开始的同一时刻开始新动画，因此您不会注意到任何差异
嗨，好问题。这是一个仅持续 4 秒的闪烁动画。之后，我尝试使用 beginelement 代码在 mouseup 事件上再次触发动画。我不明白的是它应该重置计时器，但显然不是。

标签： html svg svg-animate

【解决方案1】：

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

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

【讨论】：