animatetransform 能用但需严格遵循规范：type 必须为小写 rotate/scale/translate/skewx/skewy 之一；值格式、嵌套位置、additive="sum" 及 values/keytimes 配对均须精准，否则静默失效。
animateTransform 能用，但必须写对、嵌对、配对，否则浏览器静默忽略——不是不支持，是根本没解析到。
type 值只能是 rotate/scale/translate/skewX/skewY 五个之一
写成 rotation、scaleX、transform 或 rotate scale 都无效，控制台不报错，动画直接不播。SMIL 规范只认这五个字符串，大小写也必须全小写。
-
type="rotate"：值格式为"角度 cx cy"，例如from="0 50 50"表示绕 (50,50) 从 0° 开始 -
type="scale"：接受单数值（等比）或两个空格分隔数值（"2 0.5"），不能写"scale(2)"或"2x" -
type="translate"：格式是"dx dy"，单位像素，不支持em或% - 一个
animateTransform只能处理一种变换类型；想同时旋转+缩放，得叠两个，且都设attributeName="transform"和additive="sum"
from/to 值格式错位，动画就“飞出去”或不动
常见问题不是没动，而是动偏了——因为默认中心点是 SVG 原点 (0, 0)，不是元素自身中心。
- 矩形
<rect x="40" y="40" width="20" height="20"></rect>的中心是(50, 50)，要绕它转，from必须写成"0 50 50"，不是"0" -
scale的from="1"是等比缩放起点，to="2 1"表示 X 方向放大 2 倍、Y 不变；若写成to="2"就是等比放大 - 绝对不要在同一个
from里混写多个变换，比如from="0 50 50; 1"—— 分号后的内容被丢弃，只解析前半段
values + keyTimes 组合失效的典型原因
用 values 做多关键帧动画时，values 和 keyTimes 必须严格一一对应，且全部用分号分隔，末尾不能多加分号。
- 合法：
values="0; 90; 0"+keyTimes="0; 0.5; 1"（三个值，三个时间点） - 非法：
values="0; 90; 0;"（末尾分号）→ 解析中断，动画不播 - 非法：
keyTimes="0; 0.5"（两个时间点）配三个values→ 整个动画被跳过 - 非法：
values="0, 90, 0"（逗号分隔）→ 浏览器当无效字符串处理
嵌套位置和叠加逻辑最容易被忽略
animateTransform 必须作为目标图形元素的子元素（如放在 <rect></rect> 内部），不能独立写在 <svg></svg> 根下——否则完全不生效，连 warning 都没有。
- 如果元素已有内联
transform（如<g transform="rotate(10)"></g>），动画会与之叠加；但若写在<rect transform="scale(0.8)"></rect>上，动画会覆盖而非叠加 - 需要稳定叠加？用
<g></g>包一层，静态transform放外层，animateTransform放内层图形上 -
additive="sum"是多个animateTransform共同作用于transform的必要条件，漏写就会后一个完全取代前一个
真正麻烦的不是语法本身，而是所有校验都静默失败：拼错 type、嵌错位置、分号多一个、values 和 keyTimes 数量不等……浏览器一律不提示，只当没这回事。调试时建议先删掉所有动画，逐个加回，用最简 rotate 验证是否跑起来，再扩展。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
