svg-scroll-draw

svg-scroll-draw 是一款极致轻量的 JavaScript 库，专注于实现滚动驱动的 SVG 路径动画。它仅约 3 KB（gzipped），零外部依赖，一行代码即可让 SVG 路径随页面滚动流畅绘制。

核心功能

• 滚动驱动动画：SVG 路径的绘制进度与页面滚动位置精确绑定，无需手动计算或监听滚动事件。
• 极简集成：支持原生 JavaScript 及 React、Vue、Svelte、Solid、Angular、Astro 等主流框架，无需额外封装。
• 交互式演示：提供在线 playground，安装前即可实时体验效果。

主要特性

• 零依赖：不依赖任何第三方库，体积仅 ~3 KB，加载极快。
• 框架无关：原生支持多框架，无需为每个框架编写适配器。
• 高性能：基于 CSS stroke-dashoffset 和 stroke-dasharray 实现，动画流畅不卡顿。
• 易于使用：仅需一行 JavaScript 代码即可激活动画。
• 开源免费：MIT 许可，可自由使用和修改。

适用场景

• 产品展示页：用路径动画引导用户浏览产品特性。
• 故事化叙事：配合滚动讲述品牌故事或教程。
• 数据可视化：动态绘制图表或地图路径。
• 创意着陆页：增加视觉冲击力，提升用户体验。

相比 GSAP DrawSVG（$150/年）或 Vivus（无滚动集成），svg-scroll-draw 以更轻量、更专注的方式解决了滚动 SVG 动画需求，是追求性能和简洁开发者的理想选择。