动画 SVG 渐变答案

【问题标题】：Animating a SVG gradient动画 SVG 渐变
【发布时间】：2011-12-20 21:48:34
【问题描述】：

我想生成一个随时间变化的 SVG 渐变。

在此示例代码中，我想生成一个椭圆，其渐变为红色，带有随时间从西向东传播的黄色条纹（创建微光效果）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >
        <animate 
          attributeName="offset" 
          from="0%"
          to="100%"
          repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

这还不起作用，但我不确定是因为我做错了，还是我无法使用 SVG 渐变实现效果。

【问题讨论】：

标签： animation svg gradient

【解决方案1】：

这是一个适用于 Firefox 和 Chrome 的example：

此示例中使用了规范 here 中提供的 values 属性。

<linearGradient id="myG">
<stop offset="0" stop-color="#f15361">
</stop>
<stop offset=".25" stop-color="#fbaf4a">
<animate attributeName="offset" dur="5s" values="0;1;0"
    repeatCount="indefinite" />
</stop>
<stop offset="1" stop-color="#f15361"/>

【讨论】：

【解决方案2】：

您只需要动画的时间段。例如，添加dur="5s" 作为animate 元素的属性。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >
        <animate 
          attributeName="offset" 
          from="0%"
          to="100%"
          dur="5s"
          repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

【讨论】：

@Denis 我猜你需要在 its bugtracker 上提出一个 Chrome 错误
不要使用“%'s”作为您的停止和动画值 - 使用小数 - 然后一切正常。