SVG Linear Gradient Scale and Translation Question
-
12-09-2019 - |
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?
Solution
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))