javascript - 重新缩放 svg 元素

Question

我在 svg 层内绘制了不同的 rect 元素，该层重叠在 png 图像上。

在另一个 View 中，我可以看到绘制的元素，但下面的图像更大并且比例因子不同，如果我将两个图像的宽度除以高度，结果是不一样的。

如何使用两个不同的缩放因子重新缩放图像中的 svg 元素？

这些图片可以解释我的意思

绘制了矩形的图像:

我应该重新缩放的图像:

Answer 1

我已经用一个简单的函数解决了这个问题。我们的未知数是我们想要重新缩放的矩形坐标及其大小，因此如果我们用 oldRectX 和 oldRectY 表示，newRectX 和 < em>newRectY 分别作为新旧矩形的坐标以及 oldSVGWidth 和 oldSVGHeight，newSVGWidth 和 newSVGHeight 分别作为包含矩形的旧 SVG 和新 SVG 的尺寸，应用这个比率我们可以计算新的位置和新的大小:

oldRectX : oldSVGWidth = newRectX : newSVGWidth 

所以我可以计算 newRectX:

newRectX = (oldRectX * newSVGWidth)/oldSVGWith

它适用于计算 newRectY 的相同推理，不同之处在于我必须用高度替换宽度，用 Y 替换 X:

newRectY = (oldRectY * newSVGHeight)/oldSVGHeight

最后是新尺寸:

newRectWidth = oldRectWidth * (newSVGWidth/oldSVGWidth)
newRectHeight = oldRectWidth * (newSVGHeight/oldSVGHeight)