svg缩放rect，使角重叠

我有一个左上角在（x1，y1），用svg呈现的矩形。当我重新缩放这个矩形时，我想让新矩形的左上角处于同一个坐标（x1，y1）。是否有一个公式来翻译经过调整的Rect，以便这可能发生？svg缩放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）为他们的左上角

来源

2016-05-15 Anh Tuan Nguyen

你是在谈论两个rects？新矩形在旧矩形的内部，然后缩放直到它的左上角与旧矩形的右下角齐平？你还没有作出任何示例？ – zer00ne

我编辑我的帖子，并添加了我的问题的代码 –

如果你设置'scale（1）'，那么大的尺寸会缩小到原来的尺寸，它们都在（15,15）。 'transform = scaling'的副作用是coords会相应地改变。因此，如果大矩从5缩小，然后将它的尺寸（200x200）除以10，并且它的坐标+笔画宽度（75,75）乘以5. – zer00ne

我不确定你是否想要保持这个规模，或者你想缩小规模，所以我有两个解决方案。

匹配两个矩形的坐标的简单方法是缩小大的坐标。如果你设置比例尺（1），那么大比例尺就会缩小到原来的大小，并且它们都是（15,15）。 transform = scaling的副作用是coords会相应地改变。因此，如果大矩从5缩小然后将它的尺寸（200x200）除以10，并且它的坐标+笔划宽度（75,75）除以5.
另一种方式是如果您的意图是保持大矩形尺寸在200x200。你可以用transform=translate(-12.5,-12.5)来移动它，它不是（-15，-15）的原因是它的笔画宽度是5px。

CODEPEN

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

来源

2016-05-15 23:59:15 zer00ne

谢谢，＃2是我一直在寻找的！你能给我一个简短的解释或公式，为什么你的翻译价值是-12.5？ –

当它被缩放（5）时，它也将笔画宽度缩放为5px（默认为1px）。如果处理任何具有边框的东西，则必须将边框宽度的一半用于测量从视口边缘所需的长度。所以（-15，-15），是逻辑坐标**如果边界或中风仍然是1px。当然，这不是确切的，因为按照这个逻辑，它会是（-14.5，-14.5）。或者，也许它实际上是，但不能辨别...但是，你可以从中获得的是：试验和错误。我的第一次尝试是（-15，-15），而且它还没有接近，所以我花了2次更多的调整：P – zer00ne

使用缩放的元素在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" 
 
\t width="500" height="500" viewBox="0 0 500 500" xml:space="preserve"> 
 
\t <defs> 
 
\t \t <rect id="square" x="0" y="0" width="20" height="20" style="fill: none; stroke:black" /> 
 
\t </defs> 
 
\t <use x="15" y="15" xlink:href="#square" /> 
 
\t <g transform="translate(15 15)"> 
 
\t \t <use xlink:href="#square" transform="scale(5)" /> 
 
\t </g> 
 
</svg>

来源

2016-05-15 23:55:45 PoseLab

svg缩放rect，使角重叠

回答

相关问题