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

Question

I have created an SVG egg and animated a path and added a gradient fine. I've added a linear gradient and it goes top to bottom, however i'd like 0% to be the dark colour and 100% be the light colour - so essentially the gradient is following the already existing path and getting lighter as the number increases.

Here is a link to my jsFiddle. It's probably better for me to link you guys there than put code in here (as for some reason the text doesn't render on SO's snippet thing)

http://jsfiddle.net/andyjh07/Lrywj95t/

Here is the SVG code if you need it:

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

Answer 1

If I understand your question correctly you want to have a gradient along an SVG path.

It looks like from this question , it's not possible to do this without segmenting the path.

I did however find this reference , it's a pretty complex chunk of code, but based on the result he's able to accomplish what you're after.

Good luck!