Início / user-4810214

jamieburchell's questions

Martin Hope
jamieburchell
Asked: 2024-02-07 22:00:17 +0800 CST
  • 5

Como posso alterar este SVG para que o gradiente circule de cima para baixo continuamente, de modo que quando o vermelho estiver caindo na parte inferior, ele apareça na parte superior e quando o azul estiver caindo na parte inferior, ele apareça na parte superior.

Isto é o que tenho até agora:

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

Isso tem a aparência de saltar de cima para baixo, em vez de circular conforme descrito.

svg