Início / coding / Perguntas / 77955359
Accepted
jamieburchell
Asked: 2024-02-07 22:00:17 +0800 CST

Como posso animar o gradiente deste SVG para alternar de vermelho para azul, de cima para baixo, repetidamente?

  • 772

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

1 respostas

  1. Best Answer

    Não anime a cor, anime os y1 y2atributos. Você pode aproveitar o spreadMethodatributo para alternar de uma cor para outra.

    <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

relate perguntas