SVG渐变动画化

Question

我想生成一个随时间变化的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渐变效果本身就无法实现。

- rampion

Answer 1

这是一个在Firefox和Chrome上运行的示例：

这个示例中使用了规范这里提供的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"/> 

- Priyanka

Answer 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>

- Robert Longson

---

@Denis 我猜你需要在Chrome的bug跟踪器上提出一个Chrome bug。[https://chromiumbugs.appspot.com/] - Robert Longson

不要在停止和动画值中使用“%” - 使用小数点 - 这样就可以正常工作了。 - Michael Mullany