svg 缩放矩形，使角重叠答案

【问题标题】：svg scale rect so that corners overlapsvg 缩放矩形，使角重叠
【发布时间】：2016-05-16 07:59:15
【问题描述】：

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

【问题讨论】：

你说的是两个矩形吗？新矩形在旧矩形内部然后缩放直到它的左上角与旧矩形的右下角齐平？您还没有制作任何 svg 来作为示例展示？
我编辑了我的帖子并为我的问题添加了代码
如果您设置 scale(1) ，大的将缩小到原件的大小，它们都在 (15, 15) 。 transform=scaling 的副作用是坐标会相应改变。因此，如果大矩形从 5 缩小，则将其尺寸 (200x200) 除以 10，将坐标 + 笔划宽度 (75,75) 除以 5。

标签： svg scale transformation

【解决方案1】：

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

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

CODEPEN

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

【讨论】：

谢谢，#2 正是我想要的！你能给我一个简单的解释或一个公式，为什么你的翻译值为-12.5？
当它被缩放（5）时，也将笔画宽度缩放到 5px（默认为 1px）。如果您处理任何有边框的定位，则必须将边框宽度的一半用于测量视口边缘所需的长度。所以 (-15, -15) 是逻辑坐标 IF 边框或笔划仍然是 1px。当然，这并不准确，因为按照这种逻辑，它会是 (-14.5, -14.5)。或者也许它实际上是但不可辨别......但你可以从中得到的是：反复试验。我的第一次尝试是 (-15, -15) 并且还没有接近，所以我又做了 2 次调整：P

【解决方案2】：

在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>

【讨论】：