SVG的通过属性配置和时间驱动实现动画，无运行时API参数；必需attributeName="transform"、type、from/to（或values）、dur等属性，支持多段非线性动画需values/keyTimes/calcMode组合，但存在叠加覆盖限制，现代开发更推荐CSS、JS或Web Animations API。

SVG 的 不是通过“参数控制”来实现动画，而是靠属性配置和时间驱动——它本身没有运行时可调的 API 参数，所有行为都在标签内通过属性定义。

核心属性决定变换类型和效果

必须设置以下关键属性，缺一不可：

• attributeName="transform"：固定写死，表示要动画化的是元素的 transform 属性；
• type：指定变换类型，取值为 translate、scale、rotate、skewX 或 skewY；
• from 和 to（或 values）：定义起始/结束值，格式需匹配 type：
  • translate → from="10 20"（x y 坐标）
  • scale → to="2"（等比）或 to="2 0.5"（x y 分别缩放）
  • rotate → from="0"、to="90"（角度），支持三参数形式 rotate(45 100 100) 表示绕点旋转，此时 from/to 应写成 "0 100 100" 和 "45 100 100"；
• dur：动画持续时间，如 "2s" 或 "500ms"；
• repeatCount 或 repeatDur：控制重复，如 repeatCount="indefinite" 实现循环。

values / keyTimes / calcMode 实现复杂路径

仅用 from/to 是线性二值变化。要做多段、非线性或关键帧动画，需组合使用：

• values：用分号分隔多个值，如 values="0; 90; 45; 0"（rotate 动画来回转）；
• keyTimes：配合 values 指定每个值的时间点，如 keyTimes="0; 0.5; 0.75; 1"；
• calcMode：控制插值方式：linear（默认）、discrete（跳变）、paced（匀速，对 rotate 等角度变化更自然）、spline（配合 keySplines 自定义贝塞尔缓动）。

注意 transform 的叠加与覆盖规则

SVG 中， 生成的动画值会与元素原有 transform 属性叠加计算（不是替换）。但同一元素上多个 会相互覆盖——后声明的同 type 动画会取代前面的。若需同时做平移+旋转，应：

• 写在一个 里（不支持），或
• 改用 直接动画化整个 transform 字符串（需 values 写全如 "translate(0,0) rotate(0)"; "translate(100,50) rotate(45)"），或
• 将图形包进 ，用不同 分别控制父级和子级。

兼容性与现代替代建议

属于 SVG 1.1 的 SMIL 动画，在 Chrome/Firefox/Edge 近年版本中仍可用，但 Safari 对外部 SVG 中的 SMIL 支持不稳定，且 W3C 已将 SMIL 列为“不推荐新项目使用”。实际开发中更推荐：

• CSS @keyframes + transform（适用于简单、样式类动画）；
• JavaScript 配合 requestAnimationFrame 或 GSAP（精细控制、交互响应、动态参数调节）；
• Web Animations API（element.animate()），可编程启动/暂停/修改动画，真正实现“参数控制”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！