javascript - 沿 SVG 路径动画 SVG 渐变

Question

我创建了一个 SVG egg 并为路径设置了动画并添加了渐变效果。我添加了一个线性渐变，它从上到下，但是我希望 0% 是深色，100% 是浅色 - 所以本质上渐变是沿着已经存在的路径并且随着数字变浅增加。

这是我的 jsFiddle 的链接。对我来说，把你们链接到那里可能比把代码放在这里更好(因为某些原因文本没有呈现在 SO 的片段上)

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

如果您需要，这里是 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>

Answer 1

如果我对您的问题的理解正确，您希望沿 SVG 路径设置渐变。

看起来像来自this question , 如果不分割路径就不可能做到这一点。

不过我确实找到了 this reference ，这是一段相当复杂的代码块，但根据结果，他能够完成你所追求的。

祝你好运!