SVG 變換
SVG 變換
SVG 元素可以使用變換函式進行操作。
transform 屬性可以與任何 SVG 元素一起使用。
transform 屬性定義了一個可以應用於元素及其子元素的變換函式列表。
translate()scale()rotate()skewX()skewY()matrix()
Translate() 函式
translate() 函式用於透過 x 和 y 來移動物件。
假設一個物件放置在 x="5" 和 y="5" 的位置。那麼另一個物件包含 transform="translate(50 0)"，這意味著另一個物件將放置在 x 座標 55 (5 + 50) 和 y 座標 5 (5 + 0) 的位置。
我們來看一些例子
在此示例中，紅色矩形被平移/移動到點 (55,5) 而不是 (5,5)。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>
自己動手試一試 »
在此示例中，紅色矩形被平移/移動到點 (5,55) 而不是 (5,5)。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>
自己動手試一試 »
在此示例中，紅色矩形被平移/移動到點 (55,55) 而不是 (5,5)。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>
自己動手試一試 »
Scale() 函式
scale() 函式用於按 x 和 y 對物件進行縮放。如果未提供 y，則將其設定為等於 x。
scale() 函式用於更改物件的大小。它接受兩個數字：x 縮放因子和 y 縮放因子。x 和 y 縮放因子被視為變換後的尺寸與原始尺寸的比率。例如，0.5 將物件縮小 50%。
在此示例中，使用 scale() 函式將紅色圓放大到兩倍大小。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>
自己動手試一試 »
在此示例中，使用 scale() 函式將紅色圓垂直放大到兩倍大小。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>
自己動手試一試 »
在此示例中，使用 scale() 函式將紅色圓水平放大到兩倍大小。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>
自己動手試一試 »
Rotate() 函式
rotate() 函式用於將物件按 degree 旋轉。
在此示例中，藍色矩形旋轉了 45 度。
這是 SVG 程式碼
示例
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>
自己動手試一試 »
SkewX() 函式
skewX() 函式用於沿 x 軸按 degree 對物件進行斜切。
在此示例中，藍色矩形沿 x 軸斜切了 30 度。
這是 SVG 程式碼
示例
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>
自己動手試一試 »
SkewY() 函式
skewY() 函式用於沿 y 軸按 degree 對物件進行斜切。
在此示例中，藍色矩形沿 y 軸斜切了 30 度。
這是 SVG 程式碼
示例
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>
自己動手試一試 »
