SVG 渐变偏移动画

Question

我正在制作 SVG 动画。但我遇到了一个问题...我想在我的 SVG 中为变化的渐变偏移设置动画。我为此使用这个 SVG。我已经制作了改变颜色的动画，但我无法更改渐变的偏移。

<svg className="SvgContain" width="923" height="382" viewBox="0 0 923 382" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
  <linearGradient id="gradient1">
     <stop className="stop1" offset="0%" stop-color="red">
     </stop>
     <stop className="stop2" offset="100%" stop-color="blue">
     </stop>
  </linearGradient>
   </defs>
   <path className="SvgPath" id="PolygonePath" d="M0.5 381.5L382 0H923V381.5H0.5Z" fill="url(#gradient1)">
</svg>

我尝试使用 标签来创建想要的效果，但它不起作用。 我为此使用了这段代码。我问ChatGPT animate标签是否可以处理偏移的动画。它说是的，我按照说明操作，但动画不起作用。

<svg className="SvgContain" width="923" height="382" viewBox="0 0 923 382" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
  <linearGradient id="gradient1">
     <stop className="stop1" offset="0%" stop-color="red">
        <animate
          attributeName="offset"
          values="0%; 100%"
          dur="5s"
          repeatCount="indefinite">
        </animate>
     </stop>
     <stop className="stop2" offset="100%" stop-color="blue">
        <animate
          attributeName="offset"
          values="100%; 0%"
          dur="5s"
          repeatCount="indefinite">
        </animate>
     </stop>
  </linearGradient>
   </defs>
   <path className="SvgPath" id="PolygonePath" d="M0.5 381.5L382 0H923V381.5H0.5Z" fill="url(#gradient1)">
</svg>

Answer 1

我不确定这是否是你所说的动画...看看这两个方法。我认为使用

JS

不是问题。在我看来，这是一个更好的解决方案，因为您可以更多地控制动画。下面是带有

JS

和

CSS

的变体。

CSS

有点狂野，但这是调整框架的问题。

JS选项：

const stop1 = document.getElementById('stop1');
let offset = 0;
let speed = 0.2;
let direction = 1;

const animateGradient = () => {
  offset += speed * direction;
  
  if (offset >= 100 || offset <= 0) {
    direction *= -1; 
  }
  stop1.setAttribute('offset', `${offset}%`);
 requestAnimationFrame(animateGradient);
}
animateGradient();

.SvgContain {
      width: 923px;
      height: 382px;
    }

<svg class="SvgContain" viewBox="0 0 923 382" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1" x1="-50%" y1="0%" x2="150%" y2="0%">
      <stop id="stop1" offset="0%" stop-color="red"></stop>
      <stop offset="100%" stop-color="blue"></stop>
    </linearGradient>
  </defs>
  <path class="SvgPath" id="PolygonePath" d="M0.5 381.5L382 0H923V381.5H0.5Z" fill="url(#gradient1)"></path>
</svg>

正如你所看到的，在颜色的连接处处有一条线，看起来不太好，你可以操纵停止的数量来扩展色谱。

CSS 选项

@keyframes moveGradient1 {
  0%, 100% {
    stop-color: red;
    offset: 0%;
  }
  50% {
    stop-color: blue;
    offset: 100%;
  }
}
@keyframes moveGradient2 {
  0%, 100% {
    stop-color: blue;
    offset: 100%;
  }
  50% {
    stop-color: red;
    offset: 0%;
  }
}
.stop1 {
  animation: moveGradient1 4s linear infinite;
}
.stop2 {
  animation: moveGradient2 4s linear infinite;
}

<svg class="SvgContain" width="923" height="382" viewBox="0 0 923 382" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop class="stop1" offset="0%" stop-color="red"/>
      <stop class="stop2" offset="100%" stop-color="blue"/>
    </linearGradient>
  </defs>
  <path class="SvgPath" id="PolygonePath" d="M0.5 381.5L382 0H923V381.5H0.5Z" fill="url(#gradient1)"></path>
</svg>