svg缩放矩形使角落重叠

Question

我有一个左上角的矩形（x1，y1），用svg渲染。 当我重新缩放此矩形时，我希望新rect的左上角位于相同的坐标（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)" />

我希望两个rects都有相同的坐标（15,15） topleft corner

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

我不确定你是否希望大直尺保持这么大，或者你想缩小尺寸，所以我有两种解决方案。

1. 匹配两个字母的简单方法＆＃39; coords是缩小大的。如果设置比例（1），则较大的比例将缩小到原始尺寸，并且它们都在（15,15）处。变换=缩放的副作用是坐标相应地改变。因此，如果大矩形从5缩小，则将它的尺寸（200x200）除以10，它的坐标+笔划宽度。（75,75）除以5。

2. 另一种方式是你的意图是将大直径的大小保持在200x200。你可以用transform=translate(-12.5,-12.5)移动它。它不是（-15，-15）的原因是因为它的笔划是5px宽。

CODEPEN

演示＃1中的两个解决方案都被注释掉了。