滚动SVG动画?

时间:2017-12-16 07:53:28

标签: javascript jquery svg

我有一个小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>

我想知道是否有可能以某种方式在从顶部开始到底端的滚动上用线性渐变填充白色背景?不幸的是我发现只有intentet上的绘图示例,而我在jQuery中的小经验并没有让我有机会自己做。谢谢!

1 个答案:

答案 0 :(得分:0)

对于背景资料,请看:How to create gradient color in svg background

对于滚动,这可能会有所帮助:http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/

无论如何:你应该尝试使用Snap.svg来操纵你的SVG,而不是jQuery。