（SVG - stroke-dasharray）当我开始动画时，我的路径分为两条路径

Question

我正在尝试在滚动时为 SVG 设置动画，我已经使用数学自行创建了 SVG 路径，它显示的正是我所需要的，但是当我尝试使用 [ 对路径添加效果时，问题就开始了=32=] stroke-dasharray

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

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

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

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2000 - scrollY*4; 
shape.style.strokeDashoffset=  value;
}

body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2000;
  stroke-dasharray: 2000;
}
#shapebg {
  stroke-dashoffset:2000;
  stroke-dasharray: 0;
}
#div2 {
height:19rem;
}

<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525 180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />
 
  <path id="shapebg" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525  180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="0.6" fill="none" />

</svg>
</div>

<div id="div2">
</div>

如你所见，它从两点开始，但我需要动画从头开始并直接结束，

有什么提示吗？

Answer 1

我对您的代码做了一些更改；

我删除了中间的命令移动以获得连续路径：M 525 180 595 220 变为 L595 220。由于 M 之后没有任何命令字母，默认情况下接下来的所有内容都是 L
行
你的路径总长度是 2223 不是 2000。我已经改过了。要知道路径的长度，您需要使用 getTotalLength() 方法。
您滚动的不够多。在您的代码中 let value = 2000 - scrollY*4; 但 #div1 { height:30rem;} 因为在这种情况下 1rem = 16px，30rem = 16*30 = 480。由于您需要滚动 2223，因此您需要使用 let value = 2000 - scrollY*4.631; (2223/480 = 4.631)

观察：我对数字进行了四舍五入，你可以使用未四舍五入的数字

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2223 - scrollY*4.631; 
shape.style.strokeDashoffset=  value;
}

//console.log(shape.getTotalLength())

body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2223;
  stroke-dasharray: 2223;
}

#div2 {
height:19rem;
}

<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="2.5" fill="none" />
 
  <path id="shapebg"  d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />

</svg>
</div>

<div id="div2">
</div>

（SVG - stroke-dasharray）当我开始动画时，我的路径分为两条路径

(SVG - stroke-dsaharray) my path divides into two pathes when i start animation

html

javascript

css

svg

stroke-dasharray