為什麼變換順序在 SVG 中很重要：縮放/旋轉與旋轉/縮放？

變換順序的意義：為什麼旋轉/縮放與縮放/旋轉不同

SVG 中的連結變換涉及在更改元素座標系的指定順序。此順序會顯著影響生成的形狀。

SVG 規範強調每個變換都應用於目前座標系，該座標係是初始座標系的「副本」。當縮放該座標系時，隨後會圍繞縮放後的原點進行旋轉。這解釋了為什麼在給定的範例中，第一個矩形（轉換為scale(2, 1)rotate(10deg)）出現傾斜。

將初始座標系視為正方形。縮放 (2, 1) 將其水平拉伸，使其寬度加倍。然後，當我們旋轉 10 度時，旋轉會圍繞縮放後的寬度和高度進行，導致頂點以不同的方式展開，從而產生傾斜效果。

另一方面，當我們先旋轉（旋轉(10deg)scale(2, 1)) 與第二個矩形一樣，旋轉圍繞初始原點發生，而不受隨後的縮放的影響。這會導致矩形簡單地按比例放大，而不會出現任何傾斜。

這種差異顯示了連結變換時變換順序的關鍵作用。為了達到預期的結果，了解每個變換如何影響座標系至關重要。

以上是為什麼變換順序在 SVG 中很重要：縮放/旋轉與旋轉/縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！