滚动上的SVG动画？

Question

I have a small svg:

 <svg xmlns="http://www.w3.org/2000/svg" width="164.969" height="195"> <path d="M164.979 28.97a3.675 3.675 0 0 1-6.19 2.66 90.127 90.127 0 1 0-.99 132.64 3.685 3.685 0 0 1 4.95 5.46 97.5 97.5 0 1 1 1.07-143.48 3.656 3.656 0 0 1 1.16 2.72z" fill="url(#linear-gradient)" fill-rule="evenodd"></path> <linearGradient id="linear-gradient"> <stop offset="0%" stop-color="#e87975"></stop> <stop offset="100%" stop-color="#f3c7a1"></stop> </linearGradient> </svg> 

I wonder if it possible to somehow fill the white background with linear gradient on scroll from top start to bottom end? Unfortunately I found only drawing examples on intentet and my small expericence in jQuery doesn't give me a chance to do it by myself. Thank you!

Answer 1

For the Background stuff look at this: How to create gradient color in svg background

For scrolling, this could be helpfull: http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/

Anyway: Instead of jQuery you should try Snap.svg for manipulating your SVG.