animateTransform的type属性必须是rotate、scale、skewX、skewY或translate之一；其他值如rotation、transform等将静默失败，动画不执行。
animateTransform 的 type 属性必须是 rotate/scale/skewX/skewY/translate 之一
浏览器只认这五个字符串，写成 rotation、scaleX 或 transform 都会静默失败——动画不执行，控制台也不报错。常见错误是把 CSS transform 的写法套过来，比如想“旋转+平移复合”，结果写了 type="rotate translate"，这直接被忽略。
实操建议：
- 单次动画只用一个
type；复合效果必须用多个<animateTransform>叠加 -
rotate的值格式是"角度 cx cy"（如"45 50 50"），缺省中心点时默认为 SVG 原点(0,0)，经常导致“转偏了” -
scale支持单参数（等比）或双参数（"sx sy"），但不能写成"scale(2,1)"
values 和 keyTimes 必须严格一一对应，且用分号分隔
values 是动画关键帧的值列表，keyTimes 是对应时间点（归一化到 0–1）。两者数量必须相等，否则整个动画失效。最常踩的坑是：复制粘贴时末尾多了一个分号，或少写一个分号，导致解析中断。
示例（合法）：
立即学习“前端免费学习笔记（深入）”；
<animateTransform attributeName="transform" type="rotate" values="0; 90; 0" keyTimes="0; 0.5; 1" dur="2s" repeatCount="indefinite" />
错误写法举例：
-
values="0; 90; 0;"（末尾分号）→ 解析失败 -
keyTimes="0; 0.5"（只有两个值，但values有三个）→ 动画不播放 - 用逗号代替分号：
values="0, 90, 0"→ 无效
attributeName 必须写成 "transform"，不能写成 "transform-origin" 或其他
<animateTransform> 只能驱动元素自身的 transform 属性，它不操作 CSS 属性，也不影响 transform-origin。想改旋转中心，只能靠 rotate 的第三四个参数（cx/cy），或提前在 <g> 外层做位移补偿。
注意点：
- 不要试图用
attributeName="transform-origin"——这个属性根本不支持动画，浏览器无视 - 如果目标元素已有内联
transform（比如transform="scale(0.8)"），<animateTransform>会**覆盖**而非叠加，导致初始状态丢失 - 需要叠加时，用
<g>包裹，把静态 transform 放在外层，动画放在内层元素上
SVG 动画在现代项目中容易被 CSS 动画替代，但有不可替代场景
纯 CSS 的 @keyframes + transform 更灵活、性能更好、支持 GPU 加速，大多数简单变形完全够用。但 <animateTransform> 在以下情况仍有价值：
- 需要与 SMIL 时间线精确同步（比如配合
<set>或<animateMotion>） - 导出为独立 SVG 文件供嵌入使用（不依赖外部 CSS/JS）
- 服务端生成 SVG 动画（如图表库输出带内联动画的矢量图）
不过得留意：Chrome 100+ 已弃用 SMIL 动画（包括 <animateTransform>），虽暂未移除，但警告日志已出现。生产环境若需长期兼容，建议优先用 CSS 或 requestAnimationFrame + setAttribute("transform", ...) 手动控制。
