选 Snap.svg 还是 GSAP，关键看动画目标：需深度操控 SVG 结构（如路径变形、渐变重绘）时 Snap.svg 更直接；追求高精度时序控制、跨元素联动或滚动触发动画时 GSAP 更稳。
选 Snap.svg 还是 GSAP，关键看动画目标：需要深度操控 SVG 结构（比如路径变形、渐变重绘、多图层协同），Snap.svg 更直接；若追求高精度时序控制、跨元素联动、滚动触发动画或复杂缓动曲线，GSAP 更稳。
适合路径形变与 SVG 内部精细操作的 Snap.svg
Snap.svg 专为 SVG 设计，API 天然适配 <path> 的 d 属性、<linearGradient> 坐标、transform 矩阵等底层属性。它支持直接对单个 SVG 元素做链式调用，比如连续修改路径数据再补间动画，无需手动解析 SVG 字符串。
- 用
paper.path().animate()实现 blob 形变，传入两个不同结构的 path 数据字符串即可自动插值 - 通过
select()和selectAll()按 CSS 类名或 ID 精准定位 SVG 子元素，适合管理含几十个<g>分组的复杂图表 - 动画结束回调里可立即调用
attr()更新渐变 stop 颜色，实现颜色过渡+形状变化同步
适合复杂时序与跨类型统一调度的 GSAP
GSAP 不限定 SVG，但它对 SVG 属性的支持非常成熟——x/y/scale/opacity/strokeWidth 等都原生支持，且 MorphSVGPlugin 可安全处理路径节点数不一致的形变，ScrollTrigger 能让 SVG 动画随滚动精准启停。
- 用
gsap.to(target, { morphSVG: '#targetPath', duration: 1.5 })替代手动计算 path 插值，避免节点数 mismatch 报错 - 多个 SVG 元素 + HTML 文字 + Canvas 图层可共用同一时间轴，例如
gsap.timeline().to(svg1, {...}).to(text, {...}).to(canvasEl, {...}) - 结合
scrollTrigger设置 start/end 触发点，让 SVG 图标在视口滚动到某区域时才逐个淡入+上浮
实际项目中怎么搭配用
纯 SVG 动效小模块（如加载图标、状态指示器）用 Snap.svg 单库足矣；中大型可视化大屏或营销页，建议 GSAP 为主力，只在需高频重绘路径或动态生成 SVG 结构时，嵌入 Snap.svg 片段辅助生成原始元素。
- 先用 Snap.svg 创建并组织 SVG 结构（比如批量生成带 id 的
<circle>和<text>），导出 DOM 引用 - 把生成的元素传给 GSAP，用
gsap.fromTo()控制入场/交互/退出全流程 - 遇到路径动画卡顿，可启用 GSAP 的
force3D: true或 Snap.svg 的optimize参数减少重绘开销
避坑提醒：浏览器兼容与性能边界
两者都支持 IE11+，但 Snap.svg 对旧版 IE 的 VML 回退已基本淘汰；GSAP v3 默认不支持 IE，需手动引入兼容包。性能方面，超过 200 个 SVG 元素同时动画时，优先用 GSAP 的 batch 模式合并渲染帧，或用 Snap.svg 的 freeze() 暂停非可视区域元素。
- Snap.svg 动画大量
<use>引用时，注意href属性在部分 Safari 版本需写成xlink:href - GSAP 操作
stroke-dasharray和stroke-dashoffset描边动画时，务必预先在 CSS 中设好stroke和stroke-width，否则可能初始不可见 - 两者都不建议在
requestAnimationFrame循环里反复调用animate()或gsap.set()，应改用 timeline 控制或事件驱动更新
