how to animate this radial gradient shifting corner to corner and so on-CodePudding

So I have this svg

            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
          <defs>
            <radialGradient id="0" gradientTransform="translate(-1 0) scale(2, 2)">
              <stop offset="0%" stop-color="rgb(0, 95, 89)"/>
              <stop offset="100%" stop-color="rgb(0,0,0)"/>
              <animateTransform attributeName="gradientTransform" type="translate" values="-1 0;-1 -1;0 -1;0 0;-1 0" type="scale" values="2, 2;2, 2;2, 2;2, 2" dur="5s" begin="0s" repeatCount="indefinite"/>
            </radialGradient>
          </defs>
          <rect fill="url(#0)" height="100%" width="100%"/>
        </svg>

My idea is want to make the gradient is shifting from top-left corner to top-right corner..and so on, and it continue looping. instead of resulting that, my svg going so weird. that the animation coming from the top.

when I remove the animation, the gradient is normal from what I am expected, the gradient placed at top-left corner.

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
              <defs>
                <radialGradient id="0" gradientTransform="translate(-1 -1) scale(2, 2)">
                  <stop offset="0%" stop-color="rgb(0, 95, 89, 0.4)"/>
                  <stop offset="100%" stop-color="rgb(0,0,0)"/> 
                </radialGradient>
              </defs>
              <rect fill="url(#0)" height="100%" width="100%"/>
            </svg>

can you help me to achieve that, please. Thank you

CodePudding user response：

Since you'll use gradientTransform for animation, things get easier if you don't use it for the basic gradient itself. In this case, we can use cx, cy and r to place the gradient in the top left corner.
As a bonus, your animation coordinates also get easier to work with: 0 0 is the top left corner and 1 1 is bottom right.

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="0" cx="0" cy="0" r="100%">
            <stop offset="0%" stop-color="rgb(0, 195, 189)"/>
            <stop offset="100%" stop-color="rgb(0,0,0)"/>
            <animateTransform attributeName="gradientTransform" type="translate" values="0 0; 1 0; 1 1; 0 1; 0 0;" 
                              dur="5s" repeatCount="indefinite"/>
        </radialGradient>
    </defs>
    <rect fill="url(#0)" height="100%" width="100%"/>
</svg>