javascript - 滚动时填充 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

我使用该路径两次。第一次使用中风-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>