Question

我有以下SVG代码：

<svg height="130" width="500">
  <defs>
    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#054f16">
        <animate attributeName="stop-color" values="#054f16; #91bc9c" dur="4s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#01FF89">
        <animate attributeName="stop-color" values="#91bc9c; #054f16" dur="4s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

我希望为渐变设置动画，以便在文本后面的SVG容器中保持平滑流动。正如您从this fiddle所看到的那样，它很神奇。我该如何解决？谢谢！

Answer 1

要让动画循环/回到起点，只需为每个values属性添加一个额外的值。该值应为起始颜色。

<svg height="130" width="500">
  <defs>
    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#054f16">
        <animate attributeName="stop-color" values="#054f16; #91bc9c; #054f16" dur="4s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#01FF89">
        <animate attributeName="stop-color" values="#91bc9c; #054f16; #91bc9c" dur="4s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#logo-gradient)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

SVG动画渐变色

1 个答案: