javascript - 如何使用 svg 矩阵函数通过正确的变换数学缩放 svg

Question

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

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

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

我将以编程方式更改变换矩阵，但我想将 svg 保持在中心，而不是让它在放大和缩小时向左上角或右下角移动。

矩阵的最后 2 个元素或 dx 和 dy 如何在缩放时保持矩阵居中？

<svg width="500" height="150">
<rect x="20" y="20" width="50" height="50" transform="matrix(.5,0,0,.5,0,0)" style="fill: #cc3333"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(1,0,0,1,0,0)" style="fill: #cc3333"></rect>

<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,0,0)" style="fill: #cc3333"></rect>

</svg>

Answer 1

这就是数学的运作方式。因为 SVG 的变换原点在 SVG CANVAS 的原点(不是对象，不像 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  0  -45 ]
[  0  1  -45 ]
[  0  0   1 ]

将它们相乘(matrix multiplication 的便捷工具)，您将得到这个中间矩阵:

[  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   ]

多田。

<svg width="500" height="150">
<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,-22.5,-22.5)" fill="green"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(1,0,0,1,0,0)" fill="blue"></rect>
<rect x="20" y="20" width="50" height="50" transform="matrix(.5,0,0,.5,22.5,22.5)" fill="red"></rect>




</svg>