正确可用的是，它是svg原生动画元素，专用于对transform属性做插值动画；必须嵌套在图形内部，attributename设为"transform"，type限于rotate/scale/translate/skewx/skewy，多变换需叠加多个并设additive="sum"。
真正可用的是 <animatetransform></animatetransform>（注意首字母 T 大写），它是 SVG 原生动画元素，专用于对 transform 属性做插值动画。
的基本用法
- 必须嵌套在目标图形内部（如
<rect></rect>、<circle></circle>、<g></g>），不能独立放在<svg></svg>根下 -
attributeName必须设为"transform" -
type取值只能是："rotate"、"scale"、"translate"、"skewX"或"skewY" -
from和to的格式必须严格匹配type类型，否则无效
例如旋转动画：
<rect x="50" y="50" width="40" height="40" fill="#3498db"><animatetransform attributename="transform" type="rotate" from="0 70 70" to="360 70 70" dur="2s" repeatcount="indefinite"></animatetransform></rect>
这里 from="0 70 70" 表示“绕坐标 (70,70) 从 0° 开始”，不是只写 "0"（那会默认绕左上角 (0,0)，容易移出视野）。
如何同时实现平移 + 旋转 + 缩放
SVG 不允许单个 <animatetransform></animatetransform> 混合多种类型（比如 from="0 50 50; 2" 想同时转+缩——浏览器只取分号前，后面丢弃）。
正确做法是：叠加多个 <animatetransform></animatetransform>，都作用于 transform，并启用 additive="sum"
- 每个
<animatetransform></animatetransform>各管一种变换 - 都设
attributeName="transform" - 都加
additive="sum"（否则后一个会完全覆盖前一个的 transform 效果） - 它们按书写顺序叠加，效果可预测
示例（绕中心旋转 + 等比放大 + 向右平移）：
<g transform="translate(100,100)"><circle cx="0" cy="0" r="20" fill="#e74c3c"><!-- 旋转：绕自身中心（即 g 的原点） --><animatetransform attributename="transform" type="rotate" from="0" to="360" dur="3s" repeatcount="indefinite" additive="sum"></animatetransform><!-- 缩放 --><animatetransform attributename="transform" type="scale" from="1" to="1.8" dur="3s" repeatcount="indefinite" additive="sum"></animatetransform><!-- 平移（注意：是相对当前坐标系的偏移） --><animatetransform attributename="transform" type="translate" from="0 0" to="40 0" dur="3s" repeatcount="indefinite" additive="sum"></animatetransform></circle></g>
⚠️ 注意：如果 <g></g> 上已有 transform="translate(100,100)"，它会和动画叠加，最终位置 = 初始位移 + 动画平移 + 动画旋转缩放中心偏移。建议提前规划坐标系。
常见错误与避坑提示
- 拼写错误：写成
<animatetransform></animatetransform>、<animatetransform></animatetransform>小写、或animatetransform全小写 → 全部无效 -
type写错：比如"rotation"、"scaleX"、"transform"→ 浏览器不认，静默失败 -
from/to格式错：-
type="rotate"却写from="0deg"→ 应为"0"或"0 50 50"（不带单位） -
type="scale"却写from="scale(2)"→ 应为"2"或"2 0.5" -
type="translate"却写from="100px 50px"→ 应为"100 50"（单位隐含为用户坐标）
-
- 忘记
additive="sum"→ 多个动画只会保留最后一个，前面的被覆盖 - 把
<animatetransform></animatetransform>写在<svg></svg>下而非图形内部 → 完全不执行，无提示
不复杂但容易忽略。关键就三点：拼写对、嵌套对、叠加时加 additive="sum"。
