如何设置SVG的stroke-dasharray实现签名从左到右无溢出绘制？

一、正确设置stroke-dasharray的方法 #

要实现签名从左到右完整绘制、不超出SVG长度且循环播放的效果，核心是基于路径的实际总长度来配置参数，步骤如下：

1. 获取路径的精确总长度
   打开浏览器控制台（F12），执行以下代码获取目标路径的真实长度：

document.querySelector('.stroke-ec').getTotalLength()

针对你提供的签名路径，执行后会得到一个精确数值（实际以控制台输出为准，示例约为820）。

2. 调整CSS参数
   将stroke-dasharray设置为路径总长度，同时让stroke-dashoffset的动画从总长度值过渡到0，即可实现完整的从左到右绘制效果。修改后的CSS如下：

path,
line {
  fill: none;
  stroke: #2a3745;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.stroke-ec {
  /* 替换为你获取到的路径总长度 */
  stroke-dasharray: 820;
  animation: write2 5s infinite linear;
}

@keyframes write2 {
  0% {
    /* 初始偏移量等于路径总长度，路径完全隐藏 */
    stroke-dashoffset: 820;
  }
  100% {
    /* 偏移量为0，路径完全显示 */
    stroke-dashoffset: 0;
  }
}

这样设置后，动画会完整绘制整个签名，绘制完成后立即从左侧重新开始循环。

二、便捷测试参数的方法 #

• 控制台实时修改：在浏览器开发者工具的「元素」面板中选中.stroke-ec元素，直接在「样式」面板中修改stroke-dasharray和stroke-dashoffset的值，实时预览效果。
• 动态绑定CSS变量：用JS获取路径长度后自动设置CSS变量，无需手动修改CSS：

  const path = document.querySelector('.stroke-ec');
  const length = path.getTotalLength();
  path.style.setProperty('--path-length', length);
  

  对应CSS写法：

  .stroke-ec {
    stroke-dasharray: var(--path-length);
    animation: write2 5s infinite linear;
  }
  @keyframes write2 {
    0% { stroke-dashoffset: var(--path-length); }
    100% { stroke-dashoffset: 0; }
  }
  

• 动画面板调试：在开发者工具的「动画」面板中找到write2动画，拖动时间轴或修改关键帧数值，直观调整动画速度和偏移量。

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