Javascript 如何调整SVG路径动画速度？

我的页面上有一个路径，该路径与页面的滚动条一起显示。问题是动画落后了。代码有什么问题

以下是页面url：

//获取元素的id和元素的长度
var mypath=document.getElementById（“mypath”）；
var length=mypath.getTotalLength（）；
//图形的起始位置
mypath.style.strokeDasharray=长度；
//通过偏移虚线隐藏三角形。在滚动绘制之前，删除此线以显示三角形
mypath.style.strokeDashoffset=长度；
//查找滚动上的滚动百分比（使用跨浏览器属性），并偏移与滚动百分比相同的量
addEventListener（“滚动”，myFunction）；
函数myFunction（）{
变量scrollpercent=（document.body.scrollTop+document.documentElement.scrollTop）/（document.documentElement.scrollHeight-document.documentElement.clientHeight）；
var draw=长度*百分比；
//反转图形（向上滚动时）
mypath.style.strokeDashoffset=长度-绘制；
}

请提供代码好吗？因为路径不是垂直线，所以它的长度大于滚动距离

<svg id="mysvg" width="770" height="4068" viewBox="0 0 770 4068" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path id="mypath" d="M202 63.0001C452 -68.9996 760.222 40.5002 749.5 258.5C741.779 415.5 573.013 496.594 464.5 625C314.5 802.5 533 966.5 560 844C587 721.5 247.462 652 195 900C145.5 1134 365 1239 404 1398.5C440.935 1549.55 450.501 1780 235.501 1823.5C20.5013 1867 -41.9995 1625 86.5005 1530C191.5 1452.37 382.5 1504 351.5 1724.5C322.047 1934 269.288 1975.5 284 2097C298.713 2218.5 345.5 2295 498.5 2425C570.913 2486.53 575.981 2543 567 2580C532.478 2722.23 326.5 2694 351.5 2608C371.995 2537.5 474.637 2553.5 461 2631.5C437.228 2767.48 72.5002 2869.5 91.0002 3113.5C104.89 3296.7 226.434 3348.25 390.5 3450C673.5 3625.51 616 3828.5 592 4034" stroke="white" stroke-width="10"/>
</g>
<defs>
<filter id="filter0_d" x="0.121887" y="0.811035" width="769.651" height="4066.77" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="18"/>
<feGaussianBlur stdDeviation="7.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

<script>
// Get the id of the <path> element and the length of <path>
var mypath = document.getElementById("mypath");
var length = mypath.getTotalLength();

// The start position of the drawing
mypath.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
mypath.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;

  // Reverse the drawing (when scrolling upwards)
  mypath.style.strokeDashoffset = length - draw;
}
</script>