SVG Linear Gradient Scale and Translation Question

Question

I have the following radial gradient:

<radialGradient
   inkscape:collect="always"
   xlink:href="#linearGradient2454"
   id="radialGradient2460"
   cx="4022.8572"
   cy="5451.2656"
   fx="4022.8572"
   fy="5451.2656"
   r="3559.865"
   gradientTransform="matrix(-0.1071067,-0.1166362,0.1377765,-7.0459663e-2,276.61943,1452.439)"
   gradientUnits="userSpaceOnUse" />

I'd like to reduce this gradient in size by 90% and translate it appropriately based upon this new scale (x position becomes 402.2, y position becomes 545.1, etc).

Obviously, multiplying cx, cy, fx, fy, and r by .1 will get me part of the way there. However, how do I programatically rework the gradientTransform to get the rest of the way?

Answer 1

I would leave the parameters (cx,fx,r etc) untouched. Just multiply the existing transformation matrix with a new matrix for the scaling. The resulting matrix is the new transformation matrix for your gradient.

If you want to scale around the center then you also have add a translation in the scaling matrix.

So this would be for scaling factor s = 0.1:

newGradientTansform = 
oldGradienTransform * matrix(s, 0, 0, s, -cx*(s-1), -cy*(s-1))