本文介绍如何使用原生 css 和 javascript 实现 svg 文字路径的“滚动进入视口时逐字描边动画”，无需第三方库，兼容现代浏览器，支持任意 svg 字母路径。
实现类似 weaintplastic.com 首屏 SVG 文字的「滚动触发、单次播放、逐字描边」效果，核心在于三者协同：SVG 路径长度计算、stroke-dasharray/stroke-dashoffset 控制隐藏与绘制，以及 Intersection Observer API 精准监听进入视口时机。整个方案完全基于原生 Web API，零依赖、轻量、可复用。
✅ 基础前提：SVG 必须满足以下条件
- 所有文字需导出为
元素（而非 或 ），Illustrator 导出时选择「将文字转换为轮廓（Outline）」； - 每个字母对应一个独立
（如示例中 7 个 对应 “ABOUT ME” 的 7 个字符）； - fill: none 且设置 stroke（动画作用于描边）；
- 推荐移除冗余
、空组及注释，精简 SVG 结构。
? 核心实现步骤
1. 自动计算并初始化每条路径的描边动画参数
使用 getTotalLength() 获取每条
const paths = document.querySelectorAll('svg path');
paths.forEach((path, i) => {
const length = path.getTotalLength();
// 关键：将描边“拉出”路径外，实现初始不可见
path.style.strokeDasharray = `${length}`;
path.style.strokeDashoffset = `${length}`;
// 可选：添加延迟，实现逐字动画（单位 ms）
path.style.animationDelay = `${i * 200}ms`;
});
⚠️ 注意：getTotalLength() 在 SVG 未渲染完成时可能返回 0。建议将上述代码放在 DOMContentLoaded 或 window.load 后执行，或确保 SVG 已插入 DOM 且具有明确尺寸（如设置 viewBox + 显式 width/height）。
2. 使用 Intersection Observer 监听进入视口
当包含 SVG 的
const sections = document.querySelectorAll('section[data-animate="svg"]');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
observer.unobserve(entry.target); // ✅ 单次触发：观察后立即停止
}
});
},
{ threshold: 0.1 } // 当 10% 高度可见时即触发
);
sections.forEach(section => observer.observe(section));
HTML 中标记需动画的区域：
3. CSS 定义描边回绘动画
/* 必须设置 stroke 属性 */
svg path {
stroke: #000;
stroke-width: 1.2;
fill: none;
/* 初始状态：描边完全偏移，不可见 */
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
/* 触发动画：stroke-dashoffset 从 length → 0 */
section.animate svg path {
animation: draw 2s ease-out forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
? 提示：若希望所有字母同时开始动画，可删除 animationDelay；若需更精细控制（如首字母快、后续渐慢），可用 calc(${i} * 0.3s) 动态生成。
? 完整最小可运行示例（复制即用）
Scroll down ↓
✅ 总结与最佳实践
- 单次执行：observer.unobserve() 是关键，避免重复触发；
- 性能友好：Intersection Observer 比 scroll 事件更高效，无重排风险；
- 响应式适配：getTotalLength() 基于 SVG 内部坐标系，不受缩放影响，但需确保 viewBox 正确；
-
无障碍增强：为 SVG 添加 aria-hidden=”true”（若仅为装饰），或为文字提供
和 <desc>；</desc><br /> - 调试技巧：在 DevTools 中临时修改 stroke-dashoffset 值，直观验证路径长度与动画起始点。
该方案已验证兼容 Chrome/Firefox/Safari/Edge（≥v90），是构建高品质、轻量级 SVG 滚动动画的生产就绪方案。