SVG文字描边动效：滚动触发实现方法

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《SVG文字描边动画教程：滚动触发动效》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

本文详解如何使用原生 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）

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

终于介绍完啦！小伙伴们，这篇关于《SVG文字描边动效：滚动触发实现方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！