如何为Figma导出的svg-animate动画设置无限循环？

一、标签是否已被废弃？ #

SVG的<animate>标签属于SMIL动画规范，并没有被废弃。它仍是W3C定义的合法SVG动画特性，只是目前行业内更流行使用CSS动画或Web Animations API来实现动画效果，部分浏览器曾对SMIL的支持有过调整，但当前主流浏览器（Chrome、Firefox、Safari等）依然支持该标签。你访问的http://www.w3.org/2000/anim地址不正确，SMIL动画的规范属于SVG标准的一部分，并非独立的子域名文档。

二、Figma导出的SVG动画如何实现无限循环？ #

若标准的repeatCount="indefinite"属性无效，大概率是Figma生成的SVG动画结构特殊导致，可尝试以下几种解决方法：

• 检查并修正动画标签属性：
  确认repeatCount="indefinite"直接添加在对应的动画标签上（比如<animate>、<animateTransform>或<animateMotion>），而非父容器。同时移除可能阻止循环的属性，比如fill="freeze"（该属性会让动画停在最后一帧）。

• 用CSS动画替代SMIL动画：
  给SVG中需要动画的元素添加自定义类名，通过CSS定义动画并设置无限循环。示例代码如下：

  /* 定义动画关键帧 */
  @keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
  }
  
  /* 应用到目标元素 */
  .svg-animated-item {
    animation: slide 2s linear infinite;
  }
  

  然后在SVG元素中添加class="svg-animated-item"即可。

• 通过Web Animations API控制循环：
  若需要更灵活的控制，可使用JavaScript调用Web Animations API，强制设置无限循环：

  const targetElement = document.querySelector('#your-svg-element-id');
  targetElement.animate(
    [
      { transform: 'translateX(0)' },
      { transform: 'translateX(100px)' }
    ],
    {
      duration: 2000,
      iterations: Infinity,
      easing: 'linear'
    }
  );
  

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