Question

我已经创建了一个SVG egg并为一条路径设置了动画并添加了渐变色。我添加了一个线性渐变，它从上到下，但我喜欢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>

Answer 1

如果我正确理解你的问题，你想在SVG路径上有一个渐变。

从this question看来，如果不对路径进行细分，就无法做到这一点。

然而，我确实找到了this reference，这是一个非常复杂的代码块，但根据结果，他能够完成你所追求的目标。

祝你好运！

沿SVG路径动画SVG渐变

1 个答案: