代码之家 › 专栏 › 技术社区 › Anh Tuan Nguyen

svg缩放矩形以使角重叠

transformation scale svg

Anh Tuan Nguyen · 技术社区 · 10 年前

我有一个左上角为(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) 左上角

2 回复 | 直到 10 年前

zer00ne 10 年前

我不确定你是想让大直肠保持那个尺寸,还是想缩小,所以我有两个解决方案。

匹配两个矩形坐标的简单方法是缩小大矩形坐标。如果设置比例(1),大的将缩小到原始大小,它们都将为(15,15)。transform=缩放的副作用是坐标会相应地改变。因此,如果大矩形从5缩小,那么将其尺寸(200x200)除以10,即坐标+笔划宽度。(75,75)乘以5。
另一种方法是,如果你打算将大矩形的尺寸保持在200x200 transform=translate(-12.5,-12.5) 它不是(-15,-15)的原因是因为它的笔划宽度是5px。

CODEPEN

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

PoseLab 10 年前

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