Изменение заливки svg, когда индикатор прогресса проходит в фоновом режиме

Question

У меня есть индикатор выполнения, который падает, когда пользователь прокручивает более 100 пикселей. Фон индикатора выполнения заполняется красным. Контейнер индикатор выполнения также содержит 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 

Answer 1

Вы почти там. Это анимационный трюк, чтобы использовать красное дерево за белым деревом. Поэтому, когда белое дерево разоблачено, появляется красное дерево.

Earlier revision отвечает на вопрос SO, однако он не является 100% -ным пикселем с различной шириной окна и масштабированием окна (возможно, можно исправить его с большей математикой). Следовательно, это новое обновление ниже.

Обновление: Новый пример использования градиента, чтобы постепенно превратить его в белый цвет. Отрегулируйте значение 0.1 в (max*0.1), если вы хотите, чтобы он стал белым позже.