Javascript SVG匹配两条不同路径的行程偏移

我有两个不同的路径，我正在设置笔划dashoffset的动画，这会产生绘图效果。有两个按钮可增加/减少笔划偏移

我试图实现的是在整个过程中匹配垂直对齐的填充路径。这可能吗

目前在演示中，两条路径的笔划虚线偏移不匹配，因为锯齿状路径的长度更大

我希望避免将主路径放置在其他两条路径之上的解决方案，因为它将消除锯齿线上的“绘制”动画外观，并且两条路径都有圆形端点。

const btnAdd=document.querySelector（“.btn add”）；
const btnSub=document.querySelector（“.btn sub”）；
const line=document.querySelector（“.line”）；
const jaggedLine=document.querySelector（“锯齿线”）；
const lineLength=line.getTotalLength（）；
常量jaggedlinength=jaggedLine.getTotalLength（）；
line.setAttribute（“stroke dasharray”，lineLength）；
setAttribute（“stroke dasharray”，jaggedLineLength）；
line.setAttribute（“笔划dashoffset”，线宽）；
setAttribute（“笔划dashoffset”，jaggedLineLength）；
让进度=0；
const updateSVG=（）=>{
setAttribute（“笔划dashoffset”，线宽-进度）；
setAttribute（“笔划dashoffset”，jaggedLineLength-进度）；
};
btnAdd.addEventListener（“单击”，（）=>{
进步++；
updateSVG（）；
});
btnSub.addEventListener（“单击”，（）=>{
进展--；
updateSVG（）；
});
.svg{
边缘顶部：50px；
}
+
-
有一个SVG属性
路径长度
，它允许我们设置路径长度

pathLength属性允许作者以用户单位指定路径的总长度。然后，通过使用比率pathLength/（路径长度的计算值）缩放所有距离计算，该值用于校准浏览器的距离计算与作者的距离计算

这可能会影响路径的实际渲染长度；包括文本路径、动画路径和各种笔划操作。基本上，所有需要路径长度的计算。例如，stroke dasharray将假定路径的起点为0，终点为pathLength属性中定义的值


如果我们将相同的
pathLength
设置为这两个值，动画就会变得简单


.svg{
显示：内联块；
边缘：1米；
}
.行，
.锯齿线{
行程：100；
行程偏移：100；
动画：破折号5s线性交替无限；
}
@关键帧破折号{
从{
行程偏移：100；
}
到{
笔划偏移：0；
}
}
有一个SVG属性
路径长度
，它允许我们设置路径长度

pathLength属性允许作者以用户单位指定路径的总长度。然后，通过使用比率pathLength/（路径长度的计算值）缩放所有距离计算，该值用于校准浏览器的距离计算与作者的距离计算

这可能会影响路径的实际渲染长度；包括文本路径、动画路径和各种笔划操作。基本上，所有需要路径长度的计算。例如，stroke dasharray将假定路径的起点为0，终点为pathLength属性中定义的值


如果我们将相同的
pathLength
设置为这两个值，动画就会变得简单


.svg{
显示：内联块；
边缘：1米；
}
.行，
.锯齿线{
行程：100；
行程偏移：100；
动画：破折号5s线性交替无限；
}
@关键帧破折号{
从{
行程偏移：100；
}
到{
笔划偏移：0；
}
}

在这些路径上合成一个矩形听起来像是最简单的方法，尽管圆形的线条帽会很麻烦…一个丑陋的解决方案是垃圾邮件getPointAtLength，直到它的
x
匹配
progress
：@kaido与中一样丑陋，性能不理想？我认为使用requestAnimationFrame而不是while循环可以减轻对主线程的阻塞。到目前为止，您的解决方案是最好的，谢谢：）丑陋的，因为不是很动态。例如，它假设动画只在x轴上运行，如果有一天您决定旋转它，整个代码将中断。就性能而言，这应该是好的。在这些路径上合成一个矩形听起来是最简单的方法，虽然圆角会很麻烦…一个丑陋的解决方案是垃圾邮件getPointAtLength，直到它的
x
匹配
progress
：@kaido与中一样丑陋，它的性能不理想？我认为使用requestAnimationFrame而不是while循环可以减轻对主线程的阻塞。到目前为止，您的解决方案是最好的，谢谢：）丑陋的，因为不是很动态。例如，它假设动画只在x轴上运行，如果有一天您决定旋转它，整个代码将中断。就性能而言，这应该是好的。如此接近，但在进程的某些部分是不一致的。我需要它们在整个过程中保持相等的长度。我不太清楚你的意思…路径是相同的长度。我猜你的意思是你希望填充的部分垂直对齐，这是一个完全不同的问题，而且更复杂，因为动画不是线性的。对不起，我不应该说长度相等。你的措辞非常完美，我希望填充的路径在整个过程中垂直对齐。到目前为止，@kaido能够使用getPointAtLength属性解决我的问题，尽管它使用while循环不断地检查它。谢谢你带我去