Javascript 重新缩放svg元素

我有不同的

rect

元素，它们被绘制在一个重叠在

png

图像上的

svg

层中

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

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

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

绘制了rect的图像：

我应该重新缩放的图像：

---

我用一个简单的函数解决了这个问题。 我们的未知数是要重新缩放的矩形坐标及其大小，因此如果我们用oldRectX和oldRectY、newRectX和newRectY表示新旧矩形坐标，用oldSVGWidth和oldSVGHeight、newSVGWidth和newSVGHeight表示包含矩形的新旧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)

---

检查。也许嵌入图像文件将有助于处理此类问题。出于好奇，RECT是否仅用作事件捕捉器？