Jquery 当进度条在后台经过时，更改svg的填充

我有一个进度条，当用户向下滚动超过100个像素时，它就会出现。进度条的背景用红色填充。进度条容器还包含一个白色树的svg

当进度条从svg后面经过时，如何更改svg的填充颜色。因此，如果进度条在树的背面的一半，左半部分将是白色的，右半部分仍然是红色的。这可能吗？我目前正在使用jQuery

我在这里模拟了一支快速笔：

以下是我用于进度条的脚本：

  // fills progress bar on scrolldown 

jQuery(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  jQuery(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});
// end progress bar

---

你快到了。这是一个动画技巧，在一棵白树后面使用一棵红树。因此，当白色的树被揭穿时，红色的树就会出现

回答了这样的问题，但是不同的窗口宽度和窗口缩放并不是100%的像素精度（可以用更多的数学来解决）。因此，以下是新的更新

---

更新：使用渐变逐渐变白的新示例。如果您希望稍后将其变为白色，请调整

（max*0.1）

中的值

0.1

。

非常感谢您花时间响应并模拟它。我喜欢你在那里做的事。这并不是我想要的（我想要的可能根本不可能）。当进度条位于树的后面时，我希望树中与进度条重叠的部分为白色，树中未重叠的部分仍为红色，如下所示：。再次感谢！更新了我的答案，提前修改。再次感谢！我想知道那个密码笔去哪儿了我以为我疯了。我明白你说的缩放级别等的意思，但这是一个很棒的开始