主页 / coding / 问题 / 77955359
Accepted
jamieburchell
Asked: 2024-02-07 22:00:17 +0800 CST

如何制作此 SVG 的渐变动画，使其从红色到蓝色、从上到下重复循环？

  • 772

我怎样才能改变这个SVG，以便渐变从上到下连续循环，这样当红色从底部掉落时，它从顶部出现，当蓝色从底部掉落时，它从顶部出现。

这是我到目前为止所拥有的：

<svg width="300px" height="500px" viewBox="0 0 180 336">
  <rect x="80" y="50" width="20" height="100" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
   <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
         <stop offset="0%" stop-color="red">
            <animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="red;blue;red;"></animate>
         </stop>
         <stop offset="100%" stop-color="blue">
            <animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="blue;red;blue"></animate>
         </stop>
       </linearGradient>
   </defs>
</svg>

https://jsfiddle.net/hq7vfL98/

这看起来是从上到下弹跳，而不是如所描述的循环。

svg

1 个回答

  1. Best Answer

    不要为颜色设置动画，而是为y1 y2属性设置动画。您可以利用该spreadMethod属性从一种颜色到另一种颜色来回循环。

    <svg width="300px" height="500px" viewBox="0 0 180 336">
  <rect x="80" y="50" width="20" height="100" fill="none" stroke="url(#grad)" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
   <defs>
      <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="reflect">
          <animate attributeName="y1" dur="3s" repeatCount="indefinite" from="0%" to="200%" />
          <animate attributeName="y2" dur="3s" repeatCount="indefinite" from="100%" to="300%" />
         <stop offset="0%" stop-color="red" />
         <stop offset="100%" stop-color="blue" />
       </linearGradient>
   </defs>
</svg>

    • 4

相关问题