本文详解如何将网页文字（尤其是指定 font-family）转换为 SVG 路径，并通过 stroke-dasharray 与 stroke-dashoffset 实现“手写式”路径绘制动画，涵盖原生方案局限、关键 CSS 属性配置、字体转路径的必要性及推荐工具链。
本文详解如何将网页文字（尤其是指定 font-family）转换为 svg 路径，并通过 `stroke-dasharray` 与 `stroke-dashoffset` 实现“手写式”路径绘制动画，涵盖原生方案局限、关键 css 属性配置、字体转路径的必要性及推荐工具链。
在 SVG 中直接对 <text> 元素应用 stroke-dasharray 和 stroke-dashoffset 并不能触发路径动画——这是因为 <text> 是文本渲染元素，不是几何路径，其 stroke 仅作轮廓描边，不支持 dash 动画逻辑。你最初的代码失效的根本原因正在于此：浏览器无法计算 <text> 的实际路径长度，stroke-dasharray: 1000 实际无效，stroke-dashoffset 也无从生效。
✅ 正确做法是：先将文字转为 SVG <path> 元素（即“矢量化”），再对其应用描边动画。只有 <path> 拥有明确的路径长度（getTotalLength()），才能精准控制 stroke-dasharray 和 stroke-dashoffset 实现“书写”效果。
✅ 正确实现三步法
-
字体转路径（必需步骤）
使用工具将文字（如 "Some text"）和指定字体（如 'Times New Roman'）渲染为 <path d="M...">。浏览器原生不提供 JS API 直接获取字体路径，因此需借助以下任一方式：- 在线工具：Font Squirrel Webfont Generator（导出 SVG 字体）或 SVGOMG + Text-to-Path 转换器（粘贴文字+选择字体→生成 path）
-
Node.js 库：opentype.js（推荐）
import * as opentype from 'opentype.js'; opentype.load('fonts/times-new-roman.ttf', (err, font) => { if (err) throw err; const path = font.getPath('Some text', 0, 100, { fontSize: 48 }); const svgPath = `<path d="${path.toSVG()}" fill="none" stroke="black" stroke-width="2"/>`; document.querySelector('svg').innerHTML = svgPath; }); - 服务端方案：使用 Puppeteer 渲染 Canvas → canvas.toDataURL('image/svg+xml') 提取 path（适合动态内容）
-
CSS 动画配置（核心）
对生成的 <path> 应用精确的 stroke-dasharray 与 stroke-dashoffset：.animated-path { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* 关键：设为路径总长，确保完整覆盖 */ stroke-dasharray: 1200; /* 建议用 JS 动态获取：path.getTotalLength() */ stroke-dashoffset: 1200; animation: draw 3s ease-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } -
可选增强：渐显填充（提升视觉层次）
如答案所示，可在描边动画结束后淡入填充色，模拟“写完即显”效果：@keyframes fadeIn { to { fill: black; } } .animated-path { animation: draw 3s ease-out forwards, fadeIn 0.5s ease-in 2.5s forwards; }
⚠️ 注意事项
-
stroke-dasharray 值必须匹配路径真实长度：硬编码（如 1000）易失配。最佳实践是在 JS 中动态获取：
const path = document.querySelector('.animated-path'); const len = path.getTotalLength(); path.style.strokeDasharray = len; path.style.strokeDashoffset = len; - 字体版权合规：Times New Roman 等系统字体在 Web 中使用受限；生产环境建议选用开源字体（如 Crimson Pro）并自行托管。
- 性能提示：复杂文字（尤其中文字体）路径数据量大，建议预渲染静态内容，避免运行时频繁调用 opentype.js。
掌握字体→路径→动画的完整链路，你就能稳定复现 CodePen 中流畅的手写文字效果——不再依赖 hack，而是基于 SVG 标准能力构建可维护、高性能的视觉动效。
