Javascript 如何制作动画的svg虚线？

我尝试用HTML（SVG）/CSS/JS制作一条动画虚线

这是我的第一个svg动画。。。很明显。。。我什么都不懂

首先，这是我的虚线：

.a00cb6af-c716-4d00-9962-797e598003da，
.a6fde9f6-9a2f-4715-ac34-678948a4d015，
.b963f74d-80cb-4571-80bd-9cf5cd28cce2{
填充：无；
行程限制：10；
笔划宽度：6px；
}
.a6fde9f6-9a2f-4715-ac34-678948a4d015{
笔划：url（#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0）；
}
.b963f74d-80cb-4571-80bd-9cf5cd28cce2{
行程：30.322 50.536；
笔划：url（#a958eb71-8928-4250-a898-e2a9df336375）；
}
.a00cb6af-c716-4d00-9962-797e598003da{
笔划：url（#a8cb66bd-35fa-45ad-b9b6-1af210f764d2）；
}

标准“线条绘制”技术使用更改的划线长度来模拟绘制效果。所以很明显，如果你的线路已经有了破折号模式，那么这种技术就行不通了。至少不是直接的

最好的解决方案是在虚线上应用

。遮罩由一条覆盖原始遮罩（虚线）的线组成。然后，我们使用标准的划线技术来设置遮罩中线条版本的动画。因此，慢慢地揭开/露出原始虚线

//获取对
var path=document.querySelector（'#pathRecrut'）；
//获取路径的长度~在这种情况下是577px
var pathLength=path.getTotalLength（）；
//划很长的破折号（路径本身的长度）
path.style.strokeDasharray=路径长度+“”+路径长度；
//偏移虚线，使其显示为完全隐藏
path.style.strokeDashoffset=路径长度；
//当页面滚动时。。。
window.addEventListener（“滚动”，函数（e）{
//降价多少？
// https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
//不得不在这里尝试三到四种不同的上网方式。有点像跨浏览器的噩梦。
var scrollPercentage=（document.documentElement.scrollTop+document.body.scrollTop）/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
//偏移虚线的长度
var drawLength=路径长度*滚动百分比；
//倒抽
path.style.strokeDashoffset=路径长度-绘图长度；
});

.a00cb6af-c716-4d00-9962-797e598003da，
.a6fde9f6-9a2f-4715-ac34-678948a4d015，
.b963f74d-80cb-4571-80bd-9cf5cd28cce2{
填充：无；
行程限制：10；
笔划宽度：6px；
}
.a6fde9f6-9a2f-4715-ac34-678948a4d015{
行程：url（#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0）；
}
.b963f74d-80cb-4571-80bd-9cf5cd28cce2{
行程：30.322 50.536；
笔划：url（#a958eb71-8928-4250-a898-e2a9df336375）；
}
.a00cb6af-c716-4d00-9962-797e598003da{
笔划：url（#a8cb66bd-35fa-45ad-b9b6-1af210f764d2）；
}
看看这个，基本上看起来和你想做的一样。是的，我知道如何使用CSS，但我需要一个滚动动画，我不知道为什么它不适用于JS。。。对不起，我是新手……请看下面的答案：