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

您可以玩transform-origin。值由下式给出： (rec.x + rect.width/2)px和(rect.y + rect.height/2)px

rect{
  transform-origin: 45px 45px;
}

<svg width="500" height="150">

<rect x="20" y="20" width="50" height="50" transform="matrix(1.5,0,0,1.5,0,0)" style="fill: #003333"></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(.5,0,0,.5,0,0)" style="fill: #0c3003"></rect>

</svg>

Answer 2

这是数学的工作方式。由于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>

如何使用svg矩阵函数通过正确的转换数学将svg缩减至原来的水平

2 个答案: