svg缩放矩形以使角重叠

我有一个矩形，左上角位于（x1，y1），用svg渲染。 当我重新缩放此矩形时，我希望新矩形的左上角位于同一坐标（x1，y1）。是否有一个公式来转换调整大小的Rect，以便实现此目的

更好的是，是否有更通用的方法，使rect可以与我选择的角重叠

编辑：我添加了我发现的这个JSFIDLE示例： . 我有一个矩形：

<rect id="square" x="15" y="15" width="20" height="20" 
style="fill: none; stroke:black" />

<use xlink:href="square" transform="scale(5)" />

我希望两个矩形的坐标（15,15）相同

---

左上角在

g

元素中使用缩放元素，并将其添加到此元素

transform=“translate（15）”

：

---

在

g

元素中使用缩放元素，并将其添加到此元素

transform=“translate（15）”

：

---

我不确定您是否希望大矩形保持该大小，或者是否希望缩小，因此我为您提供了两种解决方案

匹配两个矩形坐标的简单方法是缩小大坐标。如果你设置比例（1），大的会缩小到原稿的大小，它们都是（15，15）。变换=缩放的副作用是坐标会相应地改变。因此，如果大矩形从5缩小，则将其尺寸（200x200）除以10，并将其坐标+笔划宽度（75,75）除以5

另一种方法是，如果您打算将大矩形的大小保持在200x200。您可以使用

transform=translate（-12.5，-12.5）

移动它。之所以不移动（-15，-15），是因为它的笔划为5px宽

---

这两种解决方案都在演示中#1已被注释掉。

我不确定您是否希望大矩形保持该大小，或者您是否希望缩小，因此我为您提供了两种解决方案

匹配两个矩形坐标的简单方法是缩小大坐标。如果你设置比例（1），大的会缩小到原稿的大小，它们都是（15，15）。变换=缩放的副作用是坐标会相应地改变。因此，如果大矩形从5缩小，则将其尺寸（200x200）除以10，并将其坐标+笔划宽度（75,75）除以5

另一种方法是，如果您打算将大矩形的大小保持在200x200。您可以使用

transform=translate（-12.5，-12.5）

移动它。之所以不移动（-15，-15），是因为它的笔划为5px宽

---

两种解决方案都在演示中#1被注释掉。

您是说两个RECT吗？新矩形位于旧矩形的内部，然后缩放，直到它的左上角与旧矩形的右下角齐平？您还没有制作任何svg作为示例吗？我编辑了我的文章，并为我的问题添加了代码。如果您设置

比例（1）

，那么大的比例将缩小到原始的大小，并且它们都是（15,15）。

transform=scaling

的副作用是坐标相应地改变。因此，如果大矩形从5缩小，那么将其尺寸（200x200）除以10，将其坐标+笔划宽度（75,75）除以5。你说的是两个矩形吗？新矩形位于旧矩形的内部，然后缩放，直到它的左上角与旧矩形的右下角齐平？您还没有制作任何svg作为示例吗？我编辑了我的文章，并为我的问题添加了代码。如果您设置

比例（1）

，那么大的比例将缩小到原始的大小，并且它们都是（15,15）。

transform=scaling

的副作用是坐标相应地改变。因此，如果大矩形从5缩小，那么将其尺寸（200x200）除以10，将其坐标+笔划宽度（75,75）除以5。谢谢，#2就是我要找的！你能给我一个简单的解释或公式，为什么你翻译的值是-12.5？当它被缩放（5）时，它也将笔划宽度缩放到5px（1px是默认值）。如果要定位任何具有边框的对象，则必须将边框宽度的一半用于测量从视口边缘开始所需的长度。所以（-15，-15）是边界或笔划仍然为1px时的逻辑坐标。当然，这并不准确，因为按照这个逻辑，它将是（-14.5，-14.5）。或者它实际上是但不可辨别。。。但你能从中得到的是：尝试和错误。我的第一次尝试是（-15，-15），甚至还没有接近，所以我又做了两次调整：PThanks，#2是我想要的！你能给我一个简单的解释或公式，为什么你翻译的值是-12.5？当它被缩放（5）时，它也将笔划宽度缩放到5px（1px是默认值）。如果要定位任何具有边框的对象，则必须将边框宽度的一半用于测量从视口边缘开始所需的长度。所以（-15，-15）是边界或笔划仍然为1px时的逻辑坐标。当然，这并不准确，因为按照这个逻辑，它将是（-14.5，-14.5）。或者它实际上是但不可辨别。。。但你能从中得到的是：尝试和错误。我的第一次尝试是（-15，-15），甚至还没有接近，所以我又做了两次调整：P