Chuyển đổi SVG
Chuyển đổi SVG
Các phần tử SVG có thể được thao tác bằng các hàm biến đổi.
Thuộc tính transform
có thể được sử dụng với bất kỳ phần tử SVG nào.
Thuộc tính transform
xác định danh sách các hàm biến đổi có thể được áp dụng cho một phần tử và phần tử con của phần tử đó:
-
translate()
-
scale()
-
rotate()
-
skewX()
-
skewY()
-
matrix()
Chức năng dịch()
Hàm translate()
được sử dụng để di chuyển một đối tượng theo x
và y
.
Giả sử một đối tượng được đặt với x="5" và y="5". Sau đó, một đối tượng khác chứa Transform="translate(50 0)", điều này có nghĩa là đối tượng kia sẽ được đặt ở vị trí x 55 (5 + 50) và ở vị trí y 5 (5 + 0).
Hãy xem xét một số ví dụ:
Trong ví dụ này, hình chữ nhật màu đỏ được dịch/di chuyển đến điểm (55,5) thay vì (5,5):
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử »Trong ví dụ này, hình chữ nhật màu đỏ được dịch/di chuyển đến điểm (5,55) thay vì (5,5):
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử »Trong ví dụ này, hình chữ nhật màu đỏ được dịch/di chuyển đến điểm (55,55) thay vì (5,5):
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử » Hàm tỷ lệ ()
Hàm scale()
được sử dụng để chia tỷ lệ một đối tượng theo x
và y
. Nếu y
không được cung cấp, nó được đặt bằng x
.
Hàm scale()
được sử dụng để thay đổi kích thước của một đối tượng. Phải mất hai số: hệ số tỷ lệ x và hệ số tỷ lệ y. Các hệ số tỷ lệ x và y được lấy là tỷ lệ của kích thước được chuyển đổi so với kích thước ban đầu. Ví dụ: 0,5 thu nhỏ đối tượng xuống 50%.
Trong ví dụ này, vòng tròn màu đỏ được chia tỷ lệ thành gấp đôi kích thước bằng scale()
:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử » Trong ví dụ này, vòng tròn màu đỏ được chia tỷ lệ theo chiều dọc lên gấp đôi kích thước bằng hàm scale()
:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử » Trong ví dụ này, vòng tròn màu đỏ được chia tỷ lệ theo chiều ngang lên gấp đôi kích thước bằng hàm scale()
:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://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>
Hãy tự mình thử »Hàm Rotate()
Hàm rotate()
được sử dụng để xoay đối tượng theo một degree
.
Trong ví dụ này, hình chữ nhật màu xanh được xoay 45 độ:
Đây là mã SVG:
Ví dụ
<svg width="200" height="100" xmlns="https://www.w3.org/2000/svg">
<rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)"
/>
</svg>
Hãy tự mình thử »Hàm SkewX()
Hàm skewX()
được sử dụng để làm nghiêng một đối tượng dọc theo trục x
một degree
.
Trong ví dụ này, hình chữ nhật màu xanh bị lệch 30 độ dọc theo trục x:
Đây là mã SVG:
Ví dụ
<svg width="200" height="50" xmlns="https://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue"
transform="skewX(30)"
/>
</svg>
Hãy tự mình thử »Hàm SkewY()
Hàm skewY()
được sử dụng để làm nghiêng một đối tượng dọc theo trục y
một degree
.
Trong ví dụ này, hình chữ nhật màu xanh bị lệch dọc theo trục y 30 độ:
Đây là mã SVG:
Ví dụ
<svg width="200" height="50" xmlns="https://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue"
transform="skewY(30)"
/>
</svg>
Hãy tự mình thử »