在滚动时填充 SVG 笔划并在向上滚动时移除填充 [关闭]答案

【问题标题】：fill SVG stroke on scroll and remove fill on scroll up [closed]在滚动时填充 SVG 笔划并在向上滚动时移除填充 [关闭]
【发布时间】：2019-06-27 06:46:33
【问题描述】：

我正在尝试在网页上制作虚线 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">

【问题讨论】：

您的svg 不包含实际的视觉内容，所以您要求我们设计和实现您的 svg 并告诉您如何在滚动时对其进行动画处理？除了查看该网站并说“我想要那个，但让其他人去做”之外，您是否做了其他事情？
我在本地尝试了css和JavaScript，但看不到动画效果。
那么请添加所有代码，以便我们可以引导您朝着正确的方向前进 :) 您尝试过的任何事情都可以帮助我们更好地帮助您！

标签： javascript svg css-animations gsap

【解决方案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>

【讨论】：

这是一个实心笔触，但我需要在滚动条上填充黑色虚线，并且在向上滚动时，虚线默认虚线是浅色。
我不明白你在说什么。请重新表述您的问题，并尝试通过示例和代码解释您需要的所有内容