SVG animateTransform rotation of a linearGradient is not centered. How to center it?-CodePudding

I'm trying to make a rotating linear gradient, but if I use the animateTransform to rotate it the gradient it's not centered:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" width="200px" height="200px" fill="none">
  <rect width="100%" height="100%" fill="url(#grad)"/>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
    <animateTransform attributeName="gradientTransform" type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />
  </linearGradient>
</svg>

Is it possible to obtain this result with the animateTransform?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" width="200px" height="200px" fill="none">
  <rect width="100%" height="100%" fill="url(#grad)"/>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
    <animate attributeName="x1" dur="2s" values="0%;0%;50%;100%;100%;100%;50%;0%;0%" repeatCount="indefinite"/>
    <animate attributeName="y1" dur="2s" values="50%;0%;0%;0%;50%;100%;100%;100%;50%" repeatCount="indefinite"/>
    <animate attributeName="x2" dur="2s" values="100%;100%;50%;0%;0%;0%;50%;100%;100%" repeatCount="indefinite"/>
    <animate attributeName="y2" dur="2s" values="50%;100%;100%;100%;50%;0%;0%;0%;50%" repeatCount="indefinite"/>
  </linearGradient>
</svg>

Thanks

CodePudding user response：

You can set the value for the rotation like this:

gradientTransform="rotate(30 0.5 0.5)"

meaning that the gradient is rotated 30 degs around the center.

For the animation I'm using the attribute values instead of from and to. Tne values attribute is a list of values separated by ;. This way you can use the value for the rotation with the rotation center

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" width="200px" height="200px" fill="none">
  <rect width="100%" height="100%" fill="url(#grad)"/>
  <linearGradient id="grad"  gradientTransform="rotate(0 0.5 0.5)">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
    <animateTransform attributeName="gradientTransform" type="rotate" values="0 0.5 0.5; 360 0.5 0.5" dur="5s" repeatCount="indefinite" />
  </linearGradient>
</svg>

And yes, in order to achieve the same result you can use the from and to attributes as well

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" width="200px" height="200px" fill="none">
  <rect width="100%" height="100%" fill="url(#grad)"/>
  <linearGradient id="grad"  gradientTransform="rotate(0 0.5 0.5)">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
    <animateTransform attributeName="gradientTransform" type="rotate" from="0 0.5 0.5" to="360 0.5 0.5" dur="5s" repeatCount="indefinite" />
  </linearGradient>
</svg>