更改进度条在背景中传递时svg的填充

我有一个进度条，当用户向下滚动超过100个像素时，该进度条会下降。进度条的背景填充红色。进度条容器还包含一个白色的树的svg。更改进度条在背景中传递时svg的填充

如何在进度条通过后更改svg的填充颜色。所以，如果进度条在树的后半部分，左半部分将是白色的，右半部分仍然是红色的。这甚至有可能吗？我目前正在使用jQuery。

这里我嘲笑了快笔：http://codepen.io/redbranchmedia/pen/aGfme

这里是我使用进度条脚本：

// 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

来源

2014-10-04 jphogan

你几乎没有。在白树后面使用红树是一种动画技巧。所以当白色的树被揭开时，红色的树就会出现。

Earlier revision回答这个问题，但它不是100％像素准确的各种窗口宽度和窗口缩放（可以用更多的数学来解决它）。因此下面这个新的更新。

更新：新codepen示例使用渐变逐渐将其变为白色。如果您想稍后变成白色，请调整0.1的值(max*0.1)

来源

2014-10-04 03:26:16

非常感谢您花时间回复并嘲笑它。我喜欢你在那里做的。这不是我正在寻找的东西（我所寻找的东西可能甚至不可能）。当进度条在树后面时，我希望与进度条重叠的树的任何部分都是白色的，并且树的任何部分都不重叠，仍然像下面这样是红色的：http://i.imgur.com /9eE9QEP.png。再次感谢！ – jphogan 2014-10-06 16:44:42

在早期版本中更新了我的答案。 – 2014-10-06 19:03:05

再次感谢！我想知道那个codepen去了哪里。 :)我以为我疯了。我看到你的缩放级别等等，但这是一个很棒的开始 – jphogan 2014-10-07 20:48:51

更改进度条在背景中传递时svg的填充

回答

相关问题