3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo
3.12.5 Thuộc tính ‘transform’
Thuộc tính ‘transform’ (biến đổi) là một <transform-list>” (danh sách các biến
đổi). Thuộc tính này dùng để định nghĩa một mảng các phép biến đổi, các phép biến đổi sẽ được áp dụng theo trình tự cung cấp trong mảng. Các phép biến đổi riêng biệt được phân nhau bởi khoảng trắng hoặc dấu phẩy (‘,’). Các phép biến đổi được định
nghĩa trước là:
• matrix(<a><b><c><d><e><f>) được dùng để định nghĩa một phép biến
đổi bằng ma trận biến đổi. Các giá trị a,b,c,d,e,f là các phần tử của ma
trận biến đổi affine 3x3:
• translate(<tx><[ty]>) được dùng để định nghĩa một phép tịnh tiến.Với
tx độ dời theo trục x, ty là độ dời theo trục y. Nếu <ty> khơng được
cung cấp thì được cho bằng 0.
• scale(<sx>[<sy>]) được dùng để định nghĩa một phép tỉ lệ. Với sx và sy là chỉ số co dãn theo trục x va trục y. Nếu trị tuyệt đối của sx và sy lớn hơn 1 thì phép biến đổi dùng để phĩng to hình, ngược lại thì thu nhỏ
96
• rotate(<rotate-angle>[<cx><y>]) được dùng để định nghĩa một phép
quay quanh một điểm được cho trước <rotate-angle> độ. Nếu tham số
<cx> và <cy> khơng được cung cấp thì sẽ quay quanh gốc toạ độ của hệ trục toạ độ người dùng hiện tại. Phép biến đổi này tương đương ma trận [cos(a) sin(a) –sin(a) cos(a) 0 0].
Nếu tham số <cx> và <cy> được cung cấp thì sẽ quay quanh điểm (<cx>,<cy>). Phép biến đỏi này tương đương với dãy các biến đổi sau:
translate(<cx>,<cy>) rotate(<rotate-angle>) translate(-<cx>,-cy>).
• skewX(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục x.
• skewY(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục y. Khi áp dụng mảng các phép biến đổi thì kết quả cũng giống như khi áp dụng các phép biến đổi riêng rẽ theo trình tự trong mảng.
Ví du 1:
Định nghĩa mảng các phép biến đổi:
<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
<!-- graphics elements go here --> </g>
Cũng cĩ kết quả như định nghĩa các phép biến đổi riêng biệt sau:
<g transform="translate(-10,-20)"> <g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<!-- graphics elements go here --> </g>
</g> </g> </g>
Thuộc tính ‘transform’ được áp dụng trước khi xử lý bất kỳ toạ độ hay giá trị
97
<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
Các giá trị x, y, width, height được xử lý sau khi hệ trục toạ độ hiện tại được
áp dụng phép biến đổi tỉ lệ scale(2). Thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’ được tính theo hệ trục toạ độ người dùng mới. Do đĩ thành phần ‘rect’ sẽ tương đương
với :
<g transform="scale(2)">
<rect x="10" y="10" width="20" height="20"/> </g>