本文详解如何使用原生 css + javascript 实现 svg 文字路径的「滚动进入视口时单次绘制动画」，无需第三方库，核心基于 `gettotallength()`、`stroke-dasharray`/`stroke-dashoffset` 与 intersection observer api。
实现类似 weaintplastic.com 首屏 SVG 文字的“逐字手绘感”动画，关键不在于为每个字母写独立 CSS，而在于将 SVG 中的
✅ 核心原理简明说明
- stroke-dasharray：定义虚线模式，设为 length 即「一条实线 + 无限空白」，视觉上完全不可见；
- stroke-dashoffset：控制虚线起始位置，初始设为 length，使整条线向右偏移至完全隐藏；动画中将其归零，等效于“从左向右画出”；
-
getTotalLength()：动态获取每条
的精确长度（单位 px），避免手动计算误差； -
Intersection Observer：监听目标元素（如
）进入视口的瞬间，仅触发一次动画，符合“scroll once”需求。
? 完整实现代码（可直接复用）
HTML 结构（含 SVG）
<section class="trigger-section">
<span>向下滚动，查看动画效果</span>
</section>
<section class="trigger-section">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315 45" aria-hidden="true">
<!-- 此处粘贴你的 SVG path（已去除冗余 group 和空 rect） -->
<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 d="M92.61,32.58c0.06-0.9,0.11-2.23,0.11-3.39V13.31h2.48v8.25h0.06c0.88-1.47,2.48-2.42,4.71-2.42c3.42,0,5.85,2.71,5.82,6.7c0,4.7-3.11,7.03-6.19,7.03c-2,0-3.59-0.73-4.62-2.47h-0.09l-0.11,2.17H92.61z M95.2,27.32c0,0.3,0.06,0.6,0.11,0.87c0.48,1.66,1.94,2.8,3.76,2.8c2.62,0,4.19-2.04,4.19-5.05c0-2.63-1.43-4.89-4.11-4.89c-1.71,0-3.31,1.11-3.82,2.93c-0.06,0.27-0.14,0.6-0.14,0.98V27.32z"/>
<!-- ... 其余 path 省略，保持原结构 -->
</svg>
</section>CSS 样式（关键动画逻辑）
/* 必须设置 stroke 才能生效 */
svg path {
fill: none;
stroke: #000; /* 描边颜色 */
stroke-width: 1.2; /* 线宽，影响动画粗细 */
stroke-linecap: round;
stroke-linejoin: round;
}
/* 默认隐藏所有路径 */
.trigger-section svg path {
stroke-dasharray: 0;
stroke-dashoffset: 0;
transition: none; /* 防止初始闪动 */
}
/* 动画触发类（由 JS 添加） */
.trigger-section.animate svg path {
animation: draw-letter 2s ease-out forwards;
}
@keyframes draw-letter {
to {
stroke-dashoffset: 0;
}
}
/* 可选：为每个字母添加错峰动画（增强手绘感） */
.trigger-section.animate svg path:nth-child(1) { animation-delay: 0.1s; }
.trigger-section.animate svg path:nth-child(2) { animation-delay: 0.2s; }
/* 或更灵活地用 JS 动态设置：path.style.animationDelay = `${i * 0.15}s`; */JavaScript（自动初始化 + 滚动监听）
// 1. 初始化所有路径：计算长度并隐藏
document.querySelectorAll('.trigger-section svg path').forEach((path, i) => {
const length = path.getTotalLength();
path.style.strokeDasharray = `${length}`;
path.style.strokeDashoffset = `${length}`;
path.style.animationDelay = `${i * 0.15}s`; // 错峰启动
});
// 2. 使用 IntersectionObserver 监听进入视口
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
observer.unobserve(entry.target); // ✅ 关键：只执行一次
}
});
},
{ threshold: 0.1 } // 当 10% 进入视口即触发
);
// 3. 开始观察所有目标 section
document.querySelectorAll('.trigger-section').forEach(section => {
observer.observe(section);
});⚠️ 注意事项与最佳实践
-
SVG 要求：确保
元素无 fill（或设为 none），且有明确 stroke；避免使用 标签——需先转为路径（Illustrator 中「创建轮廓」）； - 性能优化：getTotalLength() 在首次调用时会触发 layout，建议在 DOM 加载完成后立即执行（如 DOMContentLoaded）；
- 响应式适配：若 SVG 需缩放，getTotalLength() 返回的是当前渲染尺寸，无需额外处理；
- 无障碍友好：为 SVG 添加 aria-hidden="true"（纯装饰），重要内容仍需保留语义化文本；
- 浏览器兼容性：Intersection Observer 在现代浏览器中支持良好；如需支持 IE，可用 intersection-observer polyfill。
✅ 总结
你无需为每个字母写独立 CSS 或 JS —— 通过 getTotalLength() 动态获取路径长度，配合 stroke-dasharray/stroke-dashoffset 的「虚线遮罩动画」，再用 Intersection Observer 精准控制触发时机，即可优雅实现专业级 SVG 滚动绘制效果。整个方案轻量、可维护、无外部依赖，真正“一次配置，处处复用”。
