本文详解如何使用原生 css + javascript 实现 svg 文字路径的「滚动进入视口时单次绘制动画」，无需第三方库，核心基于 `gettotallength()`、`stroke-dasharray`/`stroke-dashoffset` 与 intersection observer api。

实现类似 weaintplastic.com 首屏 SVG 文字的“逐字手绘感”动画，关键不在于为每个字母写独立 CSS，而在于将 SVG 中的 视为可描边的矢量轨迹，并通过「虚线遮罩 + 偏移动画」模拟绘制过程。整个流程分为三步：路径长度测量 → 初始隐藏（stroke-dashoffset = totalLength）→ 滚动触发渐显（stroke-dashoffset → 0）。

✅ 核心原理简明说明

• stroke-dasharray：定义虚线模式，设为 length 即「一条实线 + 无限空白」，视觉上完全不可见；
• stroke-dashoffset：控制虚线起始位置，初始设为 length，使整条线向右偏移至完全隐藏；动画中将其归零，等效于“从左向右画出”；
• getTotalLength()：动态获取每条 的精确长度（单位 px），避免手动计算误差；
• Intersection Observer：监听目标元素（如
  ）进入视口的瞬间，仅触发一次动画，符合“scroll once”需求。

? 完整实现代码（可直接复用）

HTML 结构（含 SVG）

  向下滚动，查看动画效果



  

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 滚动绘制效果。整个方案轻量、可维护、无外部依赖，真正“一次配置，处处复用”。