填补滚动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"。第二次使用元件的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>