如何将SVG路径改为虚线并保留描边动画效果？

要实现虚线样式同时保留描边绘制动画，核心是调整stroke-dasharray的参数逻辑——原来的设置是用单个大数值实现整体绘制动画，现在需要改成虚线长度+间隙长度的组合，同时配合对应路径总长度的stroke-dashoffset来维持动画效果。

方法1：精确适配路径长度（推荐） #

先用JS获取路径的实际长度，再通过CSS变量传递给样式，确保动画精准：

<svg viewBox="0 0 100 50">
  <path class="path" d="M0,25
    Q25,10 50,25
    Q75,40 100,25"/>
</svg>

<script>
// 获取路径实际长度并设置CSS变量
const path = document.querySelector('.path');
const pathLength = path.getTotalLength();
path.style.setProperty('--path-length', pathLength);
</script>

svg {
  width: 100%;
  height: auto;
}
.path {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 2;
  stroke-dasharray: 5 3; /* 自定义虚线：5px线段 + 3px间隙 */
  stroke-dashoffset: var(--path-length); /* 初始偏移等于路径总长度 */
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0; /* 偏移归0，完成绘制 */
  }
}

方法2：估算路径长度（无需JS） #

如果不需要极致精确，可以直接估算路径长度（示例中路径长度约为150），直接写死数值：

svg {
  width: 100%;
  height: auto;
}
.path {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 2;
  stroke-dasharray: 5 3;
  stroke-dashoffset: 150; /* 估算的路径长度 */
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

原理说明 #

• stroke-dasharray: 5 3定义了虚线的基础样式：每5像素的实线后跟随3像素的间隙，重复该单元覆盖整个路径。
• stroke-dashoffset初始值设为路径总长度，动画时从总长度逐步减到0，相当于让整个虚线组从路径末尾“移动”到开头，从而实现边绘制边显示虚线的效果。

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