如何为SVG点状虚线描边添加路径动画且不丢失虚线样式

stroke-dasharray为SVG描边的独占属性，你给路径添加绘制动画时，CSS里设置的stroke-dasharray: 1950直接覆盖了路径内联定义的stroke-dasharray="6 6"虚线规则，所以描边会变成实线样式。

采用双层路径叠加法实现需求，无需复杂计算，不会破坏原有虚线样式：
在需要加动画的SVG节点内写两条完全相同的路径：

• 下层路径保留你需要的虚线样式，正常渲染
• 上层路径设置为和背景色一致的实线，给上层路径加原来的描边绘制动画，动画过程中上层路径逐步消失，自然露出下层的虚线路径

完整可运行代码 #

CSS代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; /* 明确背景色，和上层遮罩路径颜色保持一致 */
}

#stroke, #mask-path {
  stroke-dasharray: 1950;
  stroke-dashoffset: 1950;
  animation: anim 2s ease forwards;
}

@keyframes anim {
  0% {
    stroke-dashoffset: 1950;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

HTML代码 #

<!-- 第一个带动画的SVG -->
<svg width="1228" height="494" viewBox="0 0 1228 494" fill="none">
  <path d="M1008.5 54C1053.67 28.1667 1157.7 -26.9001 1188.5 19.4999C1219.3 65.8999 1227 239.167 1227 320C1225.17 379 1184 495.3 1034 488.5C846.5 480 785.5 510 683.5 474.5C601.9 446.1 620.167 402 639.5 383.5C656.833 372.5 693.2 357.1 700 383.5C708.5 416.5 631.5 474.5 562.5 474.5C507.3 474.5 270.833 474.5 159.5 474.5" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
  <path id="stroke" d="M1008.5 54C1053.67 28.1667 1157.7 -26.9001 1188.5 19.4999C1219.3 65.8999 1227 239.167 1227 320C1225.17 379 1184 495.3 1034 488.5C846.5 480 785.5 510 683.5 474.5C601.9 446.1 620.167 402 639.5 383.5C656.833 372.5 693.2 357.1 700 383.5C708.5 416.5 631.5 474.5 562.5 474.5C507.3 474.5 270.833 474.5 159.5 474.5" stroke="#fff" stroke-width="3"/>
</svg>

<!-- 第二个加了动画的虚线SVG -->
<svg width="1228" height="494" viewBox="0 0 1228 494" fill="none">
  <path d="M1008.5 54C1053.67 28.1667 1157.7 -26.9001 1188.5 19.4999C1219.3 65.8999 1227 239.167 1227 320C1225.17 379 1184 495.3 1034 488.5C846.5 480 785.5 510 683.5 474.5C601.9 446.1 620.167 402 639.5 383.5C656.833 372.5 693.2 357.1 700 383.5C708.5 416.5 631.5 474.5 562.5 474.5C507.3 474.5 270.833 474.5 159.5 474.5" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
  <path id="mask-path" d="M1008.5 54C1053.67 28.1667 1157.7 -26.9001 1188.5 19.4999C1219.3 65.8999 1227 239.167 1227 320C1225.17 379 1184 495.3 1034 488.5C846.5 480 785.5 510 683.5 474.5C601.9 446.1 620.167 402 639.5 383.5C656.833 372.5 693.2 357.1 700 383.5C708.5 416.5 631.5 474.5 562.5 474.5C507.3 474.5 270.833 474.5 159.5 474.5" stroke="#fff" stroke-width="3"/>
</svg>

• 上层遮罩路径的描边宽度设置为比下层虚线稍宽（这里下层是2，上层设3），避免出现漏边问题
• 两条路径的d属性完全一致，确保完全重叠，动画过程不会出现错位
• 背景色如果不是白色，只需要修改上层路径的stroke属性值和背景色一致即可

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