SVG文字路径书写动画实现求助：字体转SVG路径及问题排查

现有代码无法运行的原因 #

你的代码存在三个核心问题：

• <text> 是文本容器而非路径图形，无法直接通过 stroke-dashoffset 实现路径绘制动画
• 未设置 stroke 属性，默认仅生效 fill，stroke-dasharray 这类描边属性不会触发
• 硬编码的 stroke-dasharray:1000 和 stroke-dashoffset:1000 不匹配文字转路径后的实际长度，动画逻辑完全失效

核心实现步骤 #

要达成目标效果，必须先将文字转换为 SVG <path> 元素，再对路径应用描边动画。

1. 字体转SVG路径的方法 #

工具类方案

• 矢量图形工具：用Illustrator、Figma等工具输入文字后，执行「创建轮廓」（Illustrator）或「转换为路径」（Figma）操作，导出SVG文件后提取其中的<path>代码即可。
• 开源JS库方案：推荐使用opentype.js，可在浏览器端动态将任意文字转换为SVG路径，适合需要动态生成文字动画的场景。

2. 完整动态实现示例（基于opentype.js） #

<svg id="text-svg" width="800" height="200" xmlns="http://www.w3.org/2000/svg"></svg>
<script src="https://cdn.jsdelivr.net/npm/opentype.js@1.3.4/dist/opentype.min.js"></script>
<script>
  // 加载字体（支持系统内置字体或自定义字体文件）
  opentype.load('fonts/Times New Roman.ttf', function(err, font) {
    if (err) {
      console.error('字体加载失败:', err);
      return;
    }
    // 生成文字路径数据
    const pathData = font.getPath('Some text', 50, 120, 48).toPathData();
    // 创建SVG路径元素
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', pathData);
    path.setAttribute('fill', 'none');
    path.setAttribute('stroke', '#000');
    path.setAttribute('stroke-width', '2');
    // 获取路径实际长度，设置动画参数
    const pathLength = path.getTotalLength();
    path.style.strokeDasharray = pathLength;
    path.style.strokeDashoffset = pathLength;
    path.style.animation = `dash 5s linear forwards`;
    
    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
    `;
    document.head.appendChild(style);
    
    // 将路径添加到SVG容器
    document.getElementById('text-svg').appendChild(path);
  });
</script>

3. 静态路径实现示例（手动转换后） #

如果已通过工具将文字转为SVG路径，可直接使用以下代码：

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200">
  <style>
    .text-path {
      fill: none;
      stroke: #000;
      stroke-width: 2;
      stroke-dasharray: var(--path-length);
      stroke-dashoffset: var(--path-length);
      animation: dash 5s linear forwards;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
  <!-- 替换为你转换后的路径数据 -->
  <path class="text-path" d="M100,100 ..." style="--path-length: 1200;" />
</svg>

注意：--path-length 的值需要通过 getPathTotalLength() 方法获取或在矢量工具中查看路径实际长度。

内容的提问来源于stack exchange，提问作者KaJi Tee