沿SVG路径对SVG渐变进行动画处理

问题描述

我创建了一个SVG鸡蛋，并对路径进行了动画处理，并添加了渐变效果。 我添加了一个线性渐变，它从上到下，但是我希望0％为深色，而100％为浅色-因此，基本上，渐变沿已存在的路径移动，并且随着数字变浅增加。

这是我的jsFiddle的链接。 对于我来说，将您链接到那里可能比在这里放置代码更好（因为某些原因，文本未呈现在SO的摘要中）

如果需要，这是SVG代码：

<div id="stage">
    <div class="egg-holder">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.7 144.3" enable-background="new 0 0 104.7 144.3" xml:space="preserve">

            <defs>
                <linearGradient id="orangeGradient"
                                x1="0%" y1="0%"
                                x2="0%" y2="100%"
                                spreadMethod="pad">
                    <stop offset="0%"   stop-color="#ff9800" stop-opacity="1"/>
                    <stop offset="100%" stop-color="#e65100" stop-opacity="1"/>
                </linearGradient>
          </defs>

            <g id="egg-grey">
                <path fill="#FFFFFF" stroke="#212121" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
            <g id="egg-orange">
                <path fill="none" stroke="url(#orangeGradient)" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
        </svg>
        <div class="timer">
            <p></p>
        </div>
    </div>
</div>