重新缩放 svg 元素

Question

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

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

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

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

绘制了矩形的图像：

我应该重新缩放的图像：

Answer 1

我已经用一个简单的函数解决了这个问题。我们的未知数是我们想要重新缩放的矩形坐标及其大小，因此如果我们用 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)

重新缩放 svg 元素

Re-scale svg element

javascript

svg

draw

reactjs