沿 SVG 路径设置 SVG 渐变动画答案

【问题标题】：Animate SVG Gradient along SVG path沿 SVG 路径设置 SVG 渐变动画
【发布时间】：2015-08-07 11:09:08
【问题描述】：

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

这是我的 jsFiddle 的链接。对我来说，将你们链接到那里可能比在这里放代码更好（因为某种原因，文本不会在 SO 的 sn-p 东西上呈现）

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

【问题讨论】：

标签： javascript css svg

【解决方案1】：

如果我正确理解您的问题，您希望沿 SVG 路径具有渐变效果。

从this question看来，不分段路径是不可能做到的。

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

祝你好运！

【讨论】：

谢谢你，我会稍微看看:)