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，使角重疊

回答

相關問題