Javascript 如何使用svg矩阵函数使用正确的变换数学将svg向后缩放

如果您查看下面的代码段，我想在svg图像上实现缩放

我希望它能优雅地放大和缩小

我正在使用矩阵函数，我知道我可以通过更改第一个和第四个或矩阵或

a

和

d

来缩小比例

以编程方式，我将更改变换矩阵，但我希望将svg保持在中心位置，而不是在放大和缩小时将其移向左上角或右下角

矩阵的最后两个元素或

dx

和

dy

在缩放时保持矩阵居中，我的数学是什么

你可以玩。数值如下所示：

（rec.x+rect.width/2）px

和

（rect.y+rect.height/2）px

rect{
变换原点：45px 45px；
}

---

这就是数学的工作方式。因为SVG的变换原点位于SVG画布的原点（与CSS不同，不是对象），所以首先必须平移形状，使其中心位于原点，然后缩放它&然后将中心移回其原始位置

首先—一个小提示—要将SVG变换的[a、b、c、d、e、f]转换为“实”基础矩阵，必须在0,0,1的矩阵中添加第三行。换句话说，要将SVG变换[a、b、c、d、e、f]转换为实矩阵，映射为：

[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]

因此，对于第一个形状，比例矩阵如下所示：

[ 1.5  0  0 ]
[  0  1.5 0 ]
[  0   0  1 ]

而你的转换回原点矩阵（例如负x，负宽度/2）是：

将它们相乘（方便的工具），得到以下中间矩阵：

[  1.5  0  -45 ]
[  0  1.5  -45 ]
[  0    0   1  ]

接下来，将该中间矩阵与“平移回原始位置矩阵”相乘，即：

[  1  0   45 ]
[  0  1   45 ]
[  0  0   1  ]

矩阵乘法的结果是：

[  1.5  0 -22.5 ] 
[  0  1.5 -22.5 ] 
[  0    0   1   ]

塔达

---

当您陈述并转换回原点矩阵（例如，负x，负宽度/2）时，这（负x，负宽度/2）从何而来：这是矩形中心与原点之间的距离。矩形的“x”属性是20，矩形的宽度是50，因此矩形的中心位于（20+50/2）=45。回到原点，它是-45。

[  1.5  0 -22.5 ] 
[  0  1.5 -22.5 ] 
[  0    0   1   ]