Javascript （SVG-stroke dsaharray）启动动画时，我的路径分为两条路径

我正在尝试在滚动上设置SVG动画，我已经用自己的数学创建了SVG路径，它显示的正是我所需要的，但是当我尝试使用CSS

stroke dasharray在路径上添加效果时，问题就开始了

我的问题是：动画从两个点开始，一个从起点开始，另一个在q命令之后，只要我使用move命令两次，一次在起点，一次在q曲线命令之后

我一直试图解决这个问题，但它完全改变了绘制的SVG

这里有一个片段来解释它是如何与我一起工作的


constshape=document.querySelector（“#shape”）；
window.addEventListener（“滚动”，幻灯片）；
函数幻灯片（）{
让值=2000-滚动*4；
shape.style.strokedashcoffset=值；
}
正文{
背景：黑色；
-webkit用户选择：无；
}
#svgdiv{
位置：固定；
保证金：自动；
顶部：1rem；
宽度：95%；
}
#第一组{
高度：30雷姆；
}
#形状{
行程偏移量：2000；
笔划阵列：2000；
}
#沙皮布{
行程偏移量：2000；
笔划数组：0；
}
#第二组{
身高：19雷姆；
}
我对您的代码做了一些更改

＞P>我删除了中间的命令以获得连续的路径：<代码> M 525 180×595 220 < /代码>变为<代码> L595 220 < /代码>。因为在M之后没有任何命令字母，所以默认情况下，接下来的所有内容都是L行


您的路径总长度是2223，而不是2000。我已经改变了一切。要知道路径的长度，需要使用该方法


你滚动得不够。在你的代码中，让value=2000-滚动*4

但是

#div1{height:30rem；}

因为在这种情况下1rem=16px，30rem=16*30=480。因为需要滚动2223，所以需要使用

let value=2000-scrollY*4.631（2223/480=4.631）


观察：我已经舍入了数字，你可以使用未舍入的数字


constshape=document.querySelector（“#shape”）；
window.addEventListener（“滚动”，幻灯片）；
函数幻灯片（）{
让值=2223-滚动*4.631；
shape.style.strokedashcoffset=值；
}
//console.log（shape.getTotalLength（））
正文{
背景：黑色；
-webkit用户选择：无；
}
#svgdiv{
位置：固定；
保证金：自动；
顶部：1rem；
宽度：95%；
}
#第一组{
高度：30雷姆；
}
#形状{
行程偏移量：2223；
阵列：2223；
}
#第二组{
身高：19雷姆；
}
我对您的代码做了一些更改

＞P>我删除了中间的命令以获得连续的路径：<代码> M 525 180×595 220 < /代码>变为<代码> L595 220 < /代码>。因为在M之后没有任何命令字母，所以默认情况下，接下来的所有内容都是L行


您的路径总长度是2223，而不是2000。我已经改变了一切。要知道路径的长度，需要使用该方法


你滚动得不够。在你的代码中，让value=2000-滚动*4

但是

#div1{height:30rem；}

因为在这种情况下1rem=16px，30rem=16*30=480。因为需要滚动2223，所以需要使用

let value=2000-scrollY*4.631（2223/480=4.631）


观察：我已经舍入了数字，你可以使用未舍入的数字


constshape=document.querySelector（“#shape”）；
window.addEventListener（“滚动”，幻灯片）；
函数幻灯片（）{
让值=2223-滚动*4.631；
shape.style.strokedashcoffset=值；
}
//console.log（shape.getTotalLength（））
正文{
背景：黑色；
-webkit用户选择：无；
}
#svgdiv{
位置：固定；
保证金：自动；
顶部：1rem；
宽度：95%；
}
#第一组{
高度：30雷姆；
}
#形状{
行程偏移量：2223；
阵列：2223；
}
#第二组{
身高：19雷姆；
}

首先非常感谢您，我已经想到我必须将其定义为带有直接坐标的行，并且我正在编辑它，但我真的非常感谢您的帮助，不管怎样，关于其他事情，我自己的代码长度是正确的，我只是给出随机的接近数字，以使代码片段能够显示效果，但是无论如何，你是完全正确的，我必须用正确的数字给出示例，无论如何，谢谢你为我节省了很多（Y）如果你设置
路径长度，就不需要获取路径长度：首先非常感谢你，我已经想好了，我必须将其定义为具有直接坐标的直线，并且我正在编辑它，但是我真的很感谢你的帮助，不管怎么说，关于其他的事情，我在我自己的一个中有正确的长度我只是给出随机的接近数字来让片段工作以显示效果，但是不管怎么说你完全正确我必须给出正确的数字，不管怎么说谢谢你救了我（Y）如果设置
路径长度
，则无需获取路径长度：