SVG线性渐变比例和平移问题答案

【问题标题】：SVG Linear Gradient Scale and Translation QuestionSVG线性渐变比例和平移问题
【发布时间】：2010-11-09 13:33:54
【问题描述】：

我有以下径向渐变：

<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" />

我想将这个渐变的大小减少 90%，并根据这个新的比例适当地转换它（x 位置变为 402.2，y 位置变为 545.1，等等）。

显然，将 cx、cy、fx、fy 和 r 乘以 0.1 将使我获得部分成功。但是，我如何以编程方式重新设计 gradientTransform 以完成剩下的工作？

【问题讨论】：

"(x 位置变成 402，y 位置变成 5451" 你打错了吧？

标签： java math svg linear-algebra matrix-multiplication

【解决方案1】：

我不会改变参数（cx、fx、r 等）。只需将现有的变换矩阵与新的矩阵相乘即可进行缩放。生成的矩阵是渐变的新变换矩阵。

如果你想围绕中心进行缩放，那么你还需要在缩放矩阵中添加一个平移。

所以这适用于比例因子 s = 0.1：

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

【讨论】：