svg 缩放矩形，使角重叠

Question

我有一个左上角位于 (x1,y1) 的矩形，用 svg 渲染。当我重新缩放此矩形时，我希望新矩形的左上角位于同一坐标 (x1,y1)。是否有一个公式来平移调整大小的 Rect，以便发生这种情况？

更好的是，有没有更通用的方法，使矩形可以与我选择的角重叠？

编辑：我添加了我发现的这个 jsfiddle 示例： here。我有一个矩形：

<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) 左上角

Answer 1

在 g 元素中使用缩放元素并添加到此元素 transform="translate(15 15)":

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500" height="500" viewBox="0 0 500 500" xml:space="preserve">
 <defs>
  <rect id="square" x="0" y="0" width="20" height="20" style="fill: none; stroke:black" />
 </defs>
 <use x="15" y="15" xlink:href="#square" />
 <g  transform="translate(15 15)">
  <use xlink:href="#square" transform="scale(5)" />
 </g>
</svg>

Answer 2

我不确定你是想让大矩形保持那个大小还是想要缩小，所以我有两个解决方案供你使用。

匹配两个矩形坐标的简单方法是缩小大矩形。如果你设置 scale(1) ，大的会缩小到原来的大小，它们都在 (15, 15) 。 transform=scaling 的副作用是坐标会相应改变。因此，如果大矩形从 5 缩小，则将其尺寸 (200x200) 除以 10，并将其坐标 + 笔划宽度。(75,75) 除以 5。
另一种方式是，如果您打算将大矩形的大小保持在 200x200。你可以用 transform=translate(-12.5,-12.5) 移动它，它不是 (-15,-15) 的原因是因为它的笔划是 5px 宽。

CODEPEN

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

svg 缩放矩形，使角重叠

svg scale rect so that corners overlap

svg

transformation

scale