本文介绍如何使用原生 css 和 javascript 实现 svg 文字路径的“滚动进入视口时逐字描边动画”，无需第三方库，兼容现代浏览器，支持任意 svg 字母路径。
实现类似 weaintplastic.com 首屏 SVG 文字的「滚动触发、单次播放、逐字描边」效果，核心在于三者协同：SVG 路径长度计算、stroke-dasharray/stroke-dashoffset 控制隐藏与绘制，以及 Intersection Observer API 精准监听进入视口时机。整个方案完全基于原生 Web API，零依赖、轻量、可复用。
✅ 基础前提：SVG 必须满足以下条件
- 所有文字需导出为 <path> 元素（而非 <text> 或 <tspan>），Illustrator 导出时选择「将文字转换为轮廓（Outline）」；
- 每个字母对应一个独立 <path>（如示例中 7 个 <path> 对应 “ABOUT ME” 的 7 个字符）；
- fill: none 且设置 stroke（动画作用于描边）；
- 推荐移除冗余 <g>、空组及注释，精简 SVG 结构。
? 核心实现步骤
1. 自动计算并初始化每条路径的描边动画参数
使用 getTotalLength() 获取每条 <path> 的精确长度，并通过 stroke-dasharray 和 stroke-dashoffset 将描边完全“隐藏”在路径起点之外：
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 的 <section> 进入视口时，为其添加 .animate 类，触发 CSS 动画：
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 中标记需动画的区域：
<section data-animate="svg">
<svg viewBox="0 0 315 45" aria-hidden="true">
<!-- 你的 path 列表 -->
</svg>
</section>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) 动态生成。
? 完整最小可运行示例（复制即用）
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: sans-serif; }
section { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
svg { max-width: 90vw; height: auto; }
svg path {
stroke: #222;
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
section.animate svg path {
animation: draw 1.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
</style>
</head>
<body>
<section><h2>Scroll down ↓</h2></section>
<section data-animate="svg">
<svg viewBox="0 0 315 45" xmlns="http://www.w3.org/2000/svg">
<!-- Paste your cleaned-up paths here (e.g., the 7 paths from your example) -->
<path d="M78.55,26.83l-2,5.75h-2.57l6.53-18.3h2.99l6.56,18.3h-2.65l-2.05-5.75H78.55z M84.85,24.98l-1.88-5.27c-0.43-1.19-0.71-2.28-1-3.34h-0.06c-0.29,1.09-0.6,2.2-0.97,3.31l-1.88,5.29H84.85z"/>
<!-- ... 其他 path -->
</svg>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const paths = document.querySelectorAll('svg path');
paths.forEach((path, i) => {
const len = path.getTotalLength();
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
path.style.animationDelay = `${i * 0.25}s`;
});
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('animate');
observer.unobserve(e.target);
}
});
}, { threshold: 0.05 });
document.querySelectorAll('section[data-animate="svg"]').forEach(el => observer.observe(el));
});
</script>
</body>
</html>✅ 总结与最佳实践
- 单次执行：observer.unobserve() 是关键，避免重复触发；
- 性能友好：Intersection Observer 比 scroll 事件更高效，无重排风险；
- 响应式适配：getTotalLength() 基于 SVG 内部坐标系，不受缩放影响，但需确保 viewBox 正确；
- 无障碍增强：为 SVG 添加 aria-hidden="true"（若仅为装饰），或为文字提供 <title> 和 <desc>；
- 调试技巧：在 DevTools 中临时修改 stroke-dashoffset 值，直观验证路径长度与动画起始点。
该方案已验证兼容 Chrome/Firefox/Safari/Edge（≥v90），是构建高品质、轻量级 SVG 滚动动画的生产就绪方案。
