SVG动画流畅且低CPU的关键是交由GPU渲染、避免重排：用transform替代viewBox/x/y修改，开启硬件加速；精简SVG结构，SVGO压缩、复用symbol；控制帧率30fps、视口内启动；隔离静态层、慎用filter。
要让SVG动画既流畅又不拖垮CPU，关键不是堆参数或换库，而是从渲染机制出发，把动画“交给GPU做，少让CPU算”。很多卡顿问题其实源于默认用软件渲染、频繁重排、路径太重，而不是动画本身有多复杂。
用transform替代viewBox或属性修改
拖拽、缩放、位移类动画，千万别改viewBox或x/y属性——这会强制浏览器重排整个SVG布局，CPU瞬间拉满。正确做法是给SVG容器加transform: translate(x, y) scale(s)，并确保该元素开启了硬件加速：
- 添加CSS：
will-change: transform;或transform: translateZ(0); - 避免在动画中动态设置
style.left/top等触发布局的属性 - 使用
requestAnimationFrame控制更新节奏，而非setTimeout或setInterval
精简SVG结构，从源头减负
CPU高往往是因为浏览器在每一帧都要解析、计算、绘制大量路径节点。优化SVG文件本身比调JS更有效：
- 用SVGO压缩：运行
svgo --precision=3 --plugins=[removeViewBox,convertPathData,mergePaths,cleanupIDs] input.svg -o output.svg - 把重复图标抽成
<symbol>+<use>，DOM节点和内存直接降90% - 删掉AI/Figma导出时自带的
<metadata>、<defs>冗余块（除非真用到滤镜或渐变） - 路径节点数超过500的图形，考虑拆成多个独立SVG分步加载
控制动画粒度与帧率
不是越快越好。60fps对多数SVG动效是浪费，尤其在中低端移动设备上：
- 描边动画、图标入场等简单效果，30fps完全够用，用
animation-timing: steps(30, jump-end)或JS控制requestAnimationFrame节流 - Vivus.js等库可设
duration和type：复杂图形选oneByOne，避免所有路径同时启动 - 禁用非可视区域的动画：监听
IntersectionObserver，只在进入视口时启动start: 'inViewport'
善用缓存与合成层
让浏览器“记住”哪些部分不用重画：
- 静态背景或不变图层，用
contain: layout paint隔离渲染边界 - 动画元素单独提升为合成层：
transform: translateZ(0)+backface-visibility: hidden - 慎用
filter或mask——它们会禁用硬件加速，改用clip-path或CSS遮罩替代 - 避免在动画中频繁读取
getBoundingClientRect()或offsetTop，触发同步布局
