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></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"></animatetransform>
错误写法举例：
-
values="0; 90; 0;"（末尾分号）→ 解析失败 -
keyTimes="0; 0.5"（只有两个值，但values有三个）→ 动画不播放 - 用逗号代替分号：
values="0, 90, 0"→ 无效
attributeName 必须写成 "transform"，不能写成 "transform-origin" 或其他
<animatetransform></animatetransform> 只能驱动元素自身的 transform 属性，它不操作 CSS 属性，也不影响 transform-origin。想改旋转中心，只能靠 rotate 的第三四个参数（cx/cy），或提前在 <g></g> 外层做位移补偿。
注意点：
- 不要试图用
attributeName="transform-origin"——这个属性根本不支持动画，浏览器无视 - 如果目标元素已有内联
transform（比如transform="scale(0.8)"），<animatetransform></animatetransform>会**覆盖**而非叠加，导致初始状态丢失 - 需要叠加时，用
<g></g>包裹，把静态 transform 放在外层，动画放在内层元素上
SVG 动画在现代项目中容易被 CSS 动画替代，但有不可替代场景
纯 CSS 的 @keyframes + transform 更灵活、性能更好、支持 GPU 加速，大多数简单变形完全够用。但 <animatetransform></animatetransform> 在以下情况仍有价值：
- 需要与 SMIL 时间线精确同步（比如配合
<set></set>或<animatemotion></animatemotion>） - 导出为独立 SVG 文件供嵌入使用（不依赖外部 CSS/JS）
- 服务端生成 SVG 动画（如图表库输出带内联动画的矢量图）
不过得留意：Chrome 100+ 已弃用 SMIL 动画（包括 <animatetransform></animatetransform>），虽暂未移除，但警告日志已出现。生产环境若需长期兼容，建议优先用 CSS 或 requestAnimationFrame + setAttribute("transform", ...) 手动控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
