滚动时填充SVG笔画，向上滚动时删除填充

Question

我正在尝试在网页上绘制SVG虚线，需要在向下滚动时填充该笔触，在向上滚动时再次缓慢地删除填充的颜色。

下面是具有滚动效果的示例网站。我需要同样的效果。 https://asaro.co.uk/

下面是我的SVG文件代码。

<svg xmlns="http://www.w3.org/2000/svg" width="802.354" height="3245.896" viewBox="0 0 802.354 3245.896">

Answer 1

我两次使用路径。第一次使用stroke-dasharray="8"。 use元素的stroke-dasharray第二次具有与路径长度相同的值。我希望这就是您所需要的。

let l = Path_440.getTotalLength();
let dasharray = l;
let dashoffset = l;
theFill.setAttributeNS(null, "stroke-dasharray", l);
theFill.setAttributeNS(null, "stroke-dashoffset", l);
wrap.addEventListener("scroll", function() {
  dashoffset = l - this.scrollTop * l / (this.scrollHeight - this.clientHeight);
  theFill.setAttributeNS(null, "stroke-dashoffset", dashoffset);
});

#wrap{height:100vh; overflow:scroll;}

<div id="wrap"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 802.354 3245.896">
   <defs>
  <path id="Path_440" d="M14581.822,1364S14348,1448,14528,1848s-408,592-408,592-392,484,232,548,412,460,412,460-144,264-464,252-144,464-144,464,36,336,384,444" transform="translate(-13997.437 -1363.059)" fill="none" /></defs>
        
<use xlink:href="#Path_440" stroke="#000" stroke-width="2" stroke-dasharray="8"/>
   
<use id="theFill" xlink:href="#Path_440" stroke="#000" stroke-width="3"/>
</svg>
</div>