如何实现SVG animateTransform动画反向往返播放（总时长8秒）

你可以通过调整animateTransform的属性来实现从a点到b点再反向回到a点的效果，以下是两种常用方案：

方案1：自动往返循环（无限重复） #

利用direction="alternate"属性让动画自动反向播放，配合repeatCount="indefinite"实现无限循环，每次往返总时长8秒：

<animateTransform
  accumulate="none"
  type="rotate"
  additive="replace"
  begin="0s"
  attributeName="transform"
  calcMode="linear"
  dur="4s"
  restart="indefinite"
  repeatCount="indefinite"
  direction="alternate"
  from="90 400.64 160.05"
  to="30 400.64 160.05"
/>

• direction="alternate"：动画在每次重复时会反向播放，第一次从from到to（4秒），第二次从to回到from（4秒），以此循环
• 保留dur="4s"作为单次单向动画的时长，往返总时长自然变为8秒

方案2：单次往返（仅播放一次来回，总时长8秒） #

如果不需要无限循环，只需要一次完整的往返，只需把repeatCount设为2，同时保留direction="alternate"：

<animateTransform
  accumulate="none"
  type="rotate"
  additive="replace"
  begin="0s"
  attributeName="transform"
  calcMode="linear"
  dur="4s"
  restart="indefinite"
  repeatCount="2"
  direction="alternate"
  from="90 400.64 160.05"
  to="30 400.64 160.05"
/>

这样动画会先执行4秒从a到b，再执行4秒从b回到a，完成后停止，总时长8秒。

补充说明 #

你原来代码里的begin="0s;second.end"是无效的，因为没有定义名为second的动画元素，用direction="alternate"是更简洁可靠的实现方式。

内容的提问来源于stack exchange，提问作者vikavenable