SVG 文字路径动画实现指南：从字体转路径到手写效果-js教程-PHP中文网

SVG 文字路径动画实现指南：从字体转路径到手写效果

本文详解如何将网页文本转换为 SVG 路径并实现“手写式”描边动画，解决直接对元素应用 stroke-dashoffset 无效的问题，并提供可落地的 HTML/CSS/JS 方案与推荐工具。

本文详解如何将网页文本转换为 svg 路径并实现“手写式”描边动画，解决直接对 `` 元素应用 `stroke-dashoffset` 无效的问题，并提供可落地的 html/css/js 方案与推荐工具。

要实现类似手写笔迹的 SVG 文字动画（如 CodePen 中的路径逐帧绘制效果），核心前提在于：stroke-dasharray 和 stroke-dashoffset 仅对描边路径（）生效，而元素默认无描边路径，即使设置 stroke 也无法直接触发 dash 动画——这正是你原始代码不工作的原因。

✅ 正确实现路径动画的三步法

将文字转为 SVG 路径（Path）
是矢量文本容器，不可直接 dash；必须先将其轮廓转换为。浏览器原生不支持运行时转换，需借助工具或库完成。

为路径添加描边与 dash 属性

.animated-path {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;      /* 总路径长度（需精确计算） */
  stroke-dashoffset: 1200;     /* 初始偏移，隐藏全部 */
  animation: draw 3s ease-in-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

（可选）叠加填充动画增强视觉效果
如示例中所示，可配合 fill 渐显动画，在描边完成后显示实心文字，模拟“写完即填色”的自然感：
```
@keyframes fadeIn {
  from { fill: transparent; }
  to { fill: black; }
}
.animated-path {
  animation: draw 3s ease-in-out forwards, fadeIn 0.5s ease-out 2.8s forwards;
}
```

? 实用转换方案推荐

方案	说明	适用场景
在线工具（快速验证）	SVGOMG + Font Squirrel Webfont Generator 或 SVG Text Path Converter	静态文案、少量标题，导出后手动嵌入
JavaScript 库（动态渲染）	`opentype.js`（解析字体并生成 path 数据） + 自定义渲染逻辑	需支持用户输入、多字体、响应式场景
现代替代方案（推荐）	使用 `textpath` 或 `svg-text-to-path` 等轻量封装库	平衡开发效率与控制力，支持主流字体

✅ 示例：使用 opentype.js 将 “Hello” 转为路径（简化版）

<script src="https://cdn.jsdelivr.net/npm/opentype.js@1.3.4/dist/opentype.min.js"></script><script>
  opentype.load('TimesNewRoman.ttf', (err, font) => {
    if (err) console.error(err);
    const path = font.getPath('Hello', 10, 80, 48); // x,y,fontSize
    const svg = `<path d="${path.toSVG()}" class="animated-path"/>`;
    document.querySelector('svg').innerHTML = svg;
  });
</script>

⚠️ 关键注意事项

stroke-dasharray 值必须匹配路径实际长度：硬编码 1000 易失配。推荐用 path.getTotalLength() 获取精确值（需在 DOM 渲染后调用）：

const $path = document.querySelector('.animated-path');
$path.style.strokeDasharray = $path.getTotalLength();
$path.style.strokeDashoffset = $path.getTotalLength();