Javascript SVG渐变和滚动

我试图在页面滚动时改变图像的渐变/颜色。这是我想到的最接近的方法，但它有很多问题，当窗口调整大小时，我遇到了“滚动间隙”大小改变的问题

用于此的JSFIDLE如下所示： 它通过滚动上的y1属性进行操作：

document.getElementById("SVGID_1_").setAttribute("y1", 93000 + progress * 94000);

我的主要问题是：有人对如何实现这一目标有其他想法吗？我对这件事的想法一窍不通

基本上，我希望在页面滚动时图像从白色变为黑色

演示问题的图像：

任何帮助都将不胜感激！

---

干杯

这是你第二次尝试问这个问题，你又一次没有很好地阐明你的问题是什么。我仍然不知道你在追求什么：）。我想你要么制作一些图片，要么详细描述你想要实现的目标。好的，我已经添加了图片，希望这能解释得更清楚。这里有一个链接到想要的效果：它不会让我添加超过2个链接，因为我的代表太低了！！欢呼这并不能回答你的问题，但可以像

.bg1{box shadow:0px 10px 20px-2px#000；}

这样的东西，然后完全删除bg2，也许可以更好地说明你想要做什么？为你的输入欢呼。您可以链接到JSFIDLE来演示您的意思吗？谢谢，我明白了。图像中描述的效果仅在Firefox中出现。在Chrome中，发生了完全不同的事情。