animation - 动画化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渐变实现的效果。

Answer 1

您只需要一段动画时间即可。例如，添加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>