动画与时序

SVG 动画改的是 文档节点上的样式或属性，下一帧由渲染器按树重绘。没有 Canvas 那套「每帧自己光栅」的循环义务，也没有「画完像素就消失」。时间线选错通道，比选错缓动函数更容易把生产搞砸。

文档清单

文档	解决的问题
CSS 与 WAAPI	应用内首选；transform vs 几何属性；will-change
SMIL 与属性动画	自包含 .svg；不要进用户上传；begin / end 事件
路径动画与描边	stroke-dashoffset、animateMotion、getPointAtLength

先立三条

1. 应用 UI（inline SVG + JS）优先 CSS / WAAPI。 时间轴、暂停、打断、和页面其它动画对齐，都走 Web Animations。
2. SMIL 在 2026 仍可用。 Chromium 2015 弃用意向已于 2016 暂停；Chromium / Gecko / WebKit 都能跑 animate / animateTransform / animateMotion。岗位是 无 JS / 无页面 CSS 运行时的自包含 .svg（<img>、CSS background、静态资源）。
3. 几何是文档，运动是投影。 编辑器 source of truth 仍是 attribute / 场景图；动画层用 transform 叠一层，结束再写回，或明确「纯装饰不进文件」。

三条通道

通道	谁在跑	岗位
CSS / WAAPI	页面运行时	应用 UI
SMIL	文档内时间图	自包含文件
JS 改 attribute / getPointAtLength	你的循环	跟点、不可 CSS 的几何

不要平行开两条写入同一 transform。相机仍然改 viewBox，不要用 CSS scale 整棵 DOM 冒充缩放。引擎边角见 07。滤镜动画的离屏成本见 06。

适用 / 不适用

适用	不适用
节点少、语义清楚的图标、图表高亮、手柄反馈	粒子、笔刷、每帧改几千个 d
自包含文件里的循环装饰（SMIL）	把 SMIL 写进要消毒的用户 SVG
路径描边揭示、沿 path 跟点	把 dasharray 当通用补间框架

cx / r 在部分引擎可当 CSS 几何属性插值，不是 可移植补间通道。vector-effect 生产只用 non-scaling-stroke。

失败形态

症状	原因
旋转绕错点	没设 transform-box / transform-origin
<img> 里动画不跑	把关键动画写成了依赖页面的 CSS / JS
上传的「图片」自己动、还能点	消毒漏了 SMIL / 事件 begin
缩放后描边忽粗忽细还发糊	相机用了 CSS scale，或滤镜被光栅

权威资料

• SVG 2 — Animation（Editor’s Draft 2026-08-18）
• Web Animations
• MDN — SVG animation

核对日期：2026-08-26