HTML怎么做svg变形动画_HTML svg animateTransform变形附代码

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", ...) 手动控制。