Javascript 在卷轴上绘制SVG虚线？

我想在卷轴上画一条svg虚线，并在上面停留了4小时

如果它只是一条直线，我可以通过在css动画上设置stroke dasharray轻松地设置它的动画，但在虚线上它不起作用

因为身体上有背景图像，所以我也不能使用遮罩技巧

我只想在卷轴上画一条大约100px的45度对角线虚线

---

有什么建议吗

在下一个示例中，我将使用wheel事件，但您可以使用scroll。我在作弊。我正在要设置动画的路径上绘制一条虚线路径。您将看到穿过间隙的动画路径。我希望有帮助

var svg=document.querySelectorsvg； var l=轨迹。获取总长度； var dasharray=l； var dashoffset=l； use.style.strokeDasharray=dasharray； use.style.strokeDashoffset=dashoffset； document.addEventListenerwheel， 功能{ e、 防止违约； 如果dashoffset>0&&e.deltaY>0 | | dashoffsetldashoffset=l； use.style.strokeDashoffset=dashoffset； }，假； svg{border:1px solid}

---

分享你在这四个小时里所做的努力我们应该看到的。。因为我在运行计算机时什么也看不到snippet@TemaniAfif我已经更新了我的答案。我已经添加了一个gif，在那里我显示了你应该在轮子上看到什么OK我没有轮子，但为什么不考虑问题中所述的滚动？我可以使用输入类型范围来设置笔划动画。或者我可以使用requestAnimationFrame。在我看来，问题的要点是如何设置虚线的动画，因为OP在写“我可以通过在css动画上设置stroke dasharray轻松设置虚线动画，但它在虚线上不起作用。”你应该使用遮罩而不是白色路径来隐藏虚线路径，这样除了虚线之外的所有内容都保持透明。就像这里：