SVG - 线性渐变。变换比矩阵 (4x4)答案

【问题标题】：SVG - linearGradient. Transformation ratio matrix (4x4)SVG - 线性渐变。变换比矩阵 (4x4)
【发布时间】：2021-03-24 13:42:47
【问题描述】：

我想写一个函数来描述linearGradient 的变换矩阵的系数，使用维度为 4x4 的变换矩阵。请帮助填写此矩阵，并使用将此矩阵应用于某个对象所需的系数。

例如，我们有一个渐变的描述：

<linearGradient
   id="linearGradient2286"
   x1="75.927002"
   x2="136.64999"
   y1="32.581001"
   y2="127.08"
   gradientTransform="matrix(0.20149,0,0,0.20149,-413.35,-155.75)"
   gradientUnits="userSpaceOnUse">
  <stop
     stop-color="#6262f1"
     offset="0"
     id="stop2" />
  <stop
     stop-color="#1d1d34"
     offset="1"
     id="stop4" />
</linearGradient>

我要填写视图的变换矩阵：

Matrix4 m1 = (
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0);

【问题讨论】：

SVG 只是一种 2D 技术。
确实如此。我需要将 2D SVG 数据传输到某种类型的转换矩阵 - 4x4。也就是说，因此，我需要得到一个 4x4 矩阵。我仍然不清楚如何做到这一点。
matrix() 的数学描述是specification 的一部分
在 Flutter 中，我必须提供 4x4 矩阵变换，它描述了用矩阵 4x4 变换的向量 2x2。我徘徊如何将 2x2 线（由向量 2x2 + 矩阵数据描述）转换为 4x4 矩阵。

标签： svg linear-gradients

【解决方案1】：

根据矩阵的布局，我希望它是：

0.20149, 0,       0, 0,
0,       0.20149, 0, 0,
0,       0,       1, 0,
-413.35, -155.75, 0, 1

或转置版本

0.20149, 0,       0, -413.35,
0,       0.20149, 0, -155.75
0,       0,       1, 0,
0,       0,       0, 1

【讨论】：

好的。我知道了。那么如何将该矩阵与向量数据（两个点 - 它是矩阵 2x2）合并？
我们现在进入矩阵乘法的主题。要将一组坐标与矩阵相乘，您必须有效地将坐标转换为矩阵。一个矩阵中的列数必须与另一个矩阵中的行数相匹配。例如。对于 4x4 矩阵，它必须是 1x4 或 4x1 矩阵。因此点 (x,y) 将变为 [x, y, 0, 1]。完整的解释超出了评论的范围。所以我建议阅读矩阵乘法和向量数学。这是一个很好的起点：mathsisfun.com/algebra/scalar-vector-matrix.html