SVG的通过属性配置和时间驱动实现动画，无运行时API参数；必需attributeName="transform"、type、from/to（或values）、dur等属性，支持多段非线性动画需values/keyTimes/calcMode组合，但存在叠加覆盖限制，现代开发更推荐CSS、JS或Web Animations API。
SVG 的 <animatetransform></animatetransform> 不是通过“参数控制”来实现动画，而是靠属性配置和时间驱动——它本身没有运行时可调的 API 参数，所有行为都在标签内通过属性定义。
核心属性决定变换类型和效果
<animatetransform></animatetransform> 必须设置以下关键属性，缺一不可：
- 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 中，<animatetransform></animatetransform> 生成的动画值会与元素原有 transform 属性叠加计算（不是替换）。但同一元素上多个 <animatetransform></animatetransform> 会相互覆盖——后声明的同 type 动画会取代前面的。若需同时做平移+旋转，应：
立即学习“前端免费学习笔记（深入）”；
- 写在一个
<animatetransform></animatetransform>里（不支持），或 - 改用
<animate></animate>直接动画化整个transform字符串（需 values 写全如"translate(0,0) rotate(0)"; "translate(100,50) rotate(45)"），或 - 将图形包进
<g></g>，用不同<animatetransform></animatetransform>分别控制父级和子级。
兼容性与现代替代建议
<animatetransform></animatetransform> 属于 SVG 1.1 的 SMIL 动画，在 Chrome/Firefox/Edge 近年版本中仍可用，但 Safari 对外部 SVG 中的 SMIL 支持不稳定，且 W3C 已将 SMIL 列为“不推荐新项目使用”。实际开发中更推荐：
- CSS
@keyframes+transform（适用于简单、样式类动画）； - JavaScript 配合
requestAnimationFrame或 GSAP（精细控制、交互响应、动态参数调节）； - Web Animations API（
element.animate()），可编程启动/暂停/修改动画，真正实现“参数控制”。
