transform
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Thuộc tính transform định nghĩa một danh sách các phép biến đổi được áp dụng cho một phần tử và các phần tử con của nó.
Note:
Là một thuộc tính trình bày, transform cũng có một thuộc tính CSS tương ứng: transform. Khi cả hai được chỉ định, thuộc tính CSS sẽ được ưu tiên. Lưu ý rằng có một số khác biệt về cú pháp giữa thuộc tính CSS và thuộc tính này!
Phần tử
Trong SVG 2, bạn có thể dùng thuộc tính transform trên bất kỳ phần tử nào, bao gồm cả phần tử gốc <svg>.
Lưu ý rằng việc dùng transform trên phần tử gốc <svg> là một tính năng mới hơn, và bạn nên kiểm tra tương thích trình duyệt để biết có được hỗ trợ hay không.
Việc dùng transform trên phần tử gốc <svg> rất tiện để áp dụng biến đổi cho toàn bộ ảnh SVG mà không cần thêm phần tử bao bọc hay giải pháp thay thế bằng CSS.
Trong SVG 1.1, chỉ có 16 phần tử sau được phép có transform được áp dụng: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, và <use>.
Ngoài ra, như một di sản từ SVG 1.1, <linearGradient> và <radialGradient> hỗ trợ thuộc tính gradientTransform, còn <pattern> hỗ trợ thuộc tính patternTransform, cả hai đều hoạt động chính xác như thuộc tính transform.
Giá trị
| Giá trị |
<transform-list>
|
|---|---|
| Giá trị mặc định | none |
| Có thể hoạt ảnh | Có |
Ví dụ
Áp dụng biến đổi cho một phần tử SVG đơn lẻ
Trong ví dụ này, chúng ta áp dụng transform cho một phần tử <g> duy nhất bên trong tài liệu SVG:
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g
fill="grey"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
Áp dụng biến đổi cho toàn bộ tài liệu SVG
Trong ví dụ này, chúng ta áp dụng transform cho phần tử gốc <svg>, nghĩa là phép biến đổi được áp dụng cho toàn bộ tài liệu SVG:
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
transform="rotate(-10 50 100)
translate(-36 15.5)
skewX(40)
scale(1 0.5)">
<g fill="grey">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
Các hàm biến đổi
Các hàm biến đổi sau có thể được dùng bởi <transform-list> của thuộc tính transform.
Warning: Theo đặc tả, bạn cũng nên có thể dùng các hàm biến đổi của CSS. Tuy nhiên, khả năng tương thích không được đảm bảo.
Matrix
Hàm biến đổi matrix(<a> <b> <c> <d> <e> <f>) chỉ định một phép biến đổi dưới dạng ma trận biến đổi gồm sáu giá trị. matrix(a,b,c,d,e,f) tương đương với việc áp dụng ma trận biến đổi:
Ma trận này ánh xạ tọa độ từ hệ tọa độ trước đó sang hệ tọa độ mới theo các đẳng thức ma trận sau:
Ví dụ
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="20" fill="green" />
<!--
In the following example we are applying the matrix:
[a c e] [3 -1 30]
[b d f] => [1 3 40]
[0 0 1] [0 0 1]
which transform the rectangle as such:
top left corner: oldX=10 oldY=10
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
top right corner: oldX=40 oldY=10
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
bottom left corner: oldX=10 oldY=30
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
bottom right corner: oldX=40 oldY=30
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-->
<rect
x="10"
y="10"
width="30"
height="20"
fill="red"
transform="matrix(3 1 -1 3 30 40)" />
</svg>
Translate
Hàm biến đổi translate(<x> [<y>]) di chuyển đối tượng theo x và y. Nếu không cung cấp y, nó được xem là 0.
Nói cách khác:
xNew = xOld + <x> yNew = yOld + <y>
Ví dụ
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- No translation -->
<rect x="5" y="5" width="40" height="40" fill="green" />
<!-- Horizontal translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="blue"
transform="translate(50)" />
<!-- Vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="red"
transform="translate(0 50)" />
<!-- Both horizontal and vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="yellow"
transform="translate(50 50)" />
</svg>
Scale
Hàm biến đổi scale(<x> [<y>]) chỉ định một phép co giãn theo x và y. Nếu không cung cấp y, nó được xem là bằng x.
Ví dụ
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- uniform scale -->
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
</svg>