SVG SMIL动画通过等标签实现，但Chrome/Firefox已弃用，仅Safari部分支持；推荐改用CSS动画或JavaScript库如GSAP。

SVG 中的 SMIL 动画是通过在 SVG 元素内部嵌入 、、（已废弃）等标签实现的，直接用 XML 语法控制属性随时间变化。它原生支持、无需 JS、语义清晰，但注意：现代 Chrome/Firefox 已**移除对 SVG 内联 SMIL 的支持**（2025 年起全面弃用），仅 Safari 仍部分支持；生产环境推荐改用 CSS 动画或 JavaScript（如 GSAP、SVG.js）。

基础 animate 标签写法

最常用的是 ，用于驱动某个数值型属性（如 x、opacity、fill 等）变化：

关键属性说明：

• attributeName：要动画的属性名，必须拼写准确（如 cx 对圆心，stroke-width 要写成 strokeWidth）
• from / to：起始与结束值；也可用 values="0;100;0" 实现多段关键帧
• dur：持续时间，支持 "2s" 或 "300ms"
• begin：延迟启动，如 "1s" 或 "click"（点击触发）
• fill="freeze"：动画结束后保持最终状态（否则恢复初始值）

animateTransform 做旋转/缩放/平移

当需要动画变换（transform）时，不能直接用 （不合法），必须用 ：

说明：

• type 可选 translate、scale、rotate、skewX、skewY
• from/to 格式依 type 而定：
  • rotate：角度 + 中心 x + 中心 y（如 "0 150 100"）
  • translate：两个数值 "20 30"
  • scale：单数（等比）或双数 "1.5" / "1.2 0.8"

用 实现纯状态切换

如果不需要过渡效果，只希望在某时刻“瞬间”改变属性（比如点击后变色），用 更轻量：

特点：

• 无 dur、from、to，只有 attributeName 和 to
• 常配合事件触发（begin="click"、begin="mouseover"）
• 适合 UI 反馈类交互，不占渲染资源

兼容性提醒与替代建议

SMIL 动画虽写法简洁，但实际项目中需谨慎：

• Chrome 从 v100+、Firefox 从 v115+ 已完全禁用内联 SMIL（ 在 SVG 内被忽略）
• Safari 当前（v17+）仍支持，但 W3C 已将其标记为“deprecated”
• 若必须用原生方案，可将动画逻辑迁移到 CSS：
  

  .my-circle { animation: spin 3s linear infinite; }
  
      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

• 复杂交互动画推荐 JavaScript 库：GSAP（支持 SVG 属性精细控制）、anime.js、或原生 Web Animations API