如何让含多段三次贝塞尔曲线的SVG路径dash动画连续播放？

你的问题根源在于SVG路径中使用了多个M（移动）命令，每个M都会生成一段独立的子路径。stroke-dasharray和stroke-dashoffset是对每段子路径单独生效的，所以动画会在每段贝塞尔曲线的起始点重复触发。

修复方法 #

直接删除路径中除第一个M外的所有M命令即可。因为你每段贝塞尔曲线的终点恰好是下一段的起点，不需要额外的移动命令，直接衔接后续的C命令就能让整个路径变成连续的单一路径。

修改后的完整代码 #

<style>
svg {
width: 600px;
overflow:visible;
}
#lined-svg path {
stroke-dasharray: 7867.43;
stroke-dashoffset: 7867.43;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 7867.43;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<svg id="lined-svg" viewBox="0 0 600 4088">
<path stroke="red" fill="none" stroke-width="6" d="M 300, 0 C 300, 114, 600, 76, 600, 190 C 600, 304, 300, 266, 300, 380 C 300, 542.6, 600, 488.4, 600, 651 C 600, 813.6, 300, 759.4, 300, 922 C 300, 1003.6, 600, 976.4, 600, 1058 C 600, 1139.6, 300, 1112.4, 300, 1194 C 300, 1308, 600, 1270, 600, 1384 C 600, 1498, 300, 1460, 300, 1574 C 300, 1655.6, 600, 1628.4, 600, 1710 C 600, 1791.6, 300, 1764.4, 300, 1846 C 300, 2008.6, 600, 1954.4, 600, 2117 C 600, 2279.6, 300, 2225.4, 300, 2388 C 300, 2604.6, 600, 2532.4, 600, 2749 C 600, 2965.6, 300, 2893.4, 300, 3110 C 300, 3224, 600, 3186, 600, 3300 C 600, 3414, 300, 3376, 300, 3490 C 300, 3555.4, 600, 3533.6, 600, 3599 C 600, 3664.4, 300, 3642.6, 300, 3708 C 300, 3822, 600, 3784, 600, 3898 C 600, 4012, 300, 3974, 300, 4088"></path>
</svg>

原理说明 #

修改后整个路径是一条连续的贝塞尔曲线链，stroke-dasharray和stroke-dashoffset会作用于整个路径的总长度，动画就会从顶部开始，连贯地绘制到路径底部，不会在中间分段重复。

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