3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo
3.12.6 Thuộc tính ‘viewBox’
Thuộc tính viewBox dùng để thiết lập một hệ trục toạ độ người dùng mới , được dùng khi muốn trải các hình ra cho vừa với thành phần vật chứa.
Áp dụng cho tất cả các thành phần cĩ khả thiết lập khung nhìn mới và các thành phần ‘marker’, ‘pattern’ và ‘view’ cĩ thuộc tính viewBox. Giá trị của thuộc tính ‘viewBox’ là một danh sách bốn số <min-x>, <min-y>, <width> và <height>,
được tách biệt nhau bởi khoảng trắng hoặc dấu phẩy, dùng để định nghĩa một hình
chữ nhật trong hệ trục toạ độ người dùng sẽ được ánh xạ vào đường bao của khung nhìn được thiết lập bởi thành phần được cho.
Khi thuộc tính viewBox được thiết lập, tác nhân người dùng tự động phát sinh các ma trận biến đổi thích hợp để ánh xạ hình chữ nhật được chỉ định trong hệ toạ độ người dùng vào đường bao của khung nhìn.
Thuộc tính ‘viewBox’ thường được dùng với thuộc tính ‘preservAspectRatio’
để xác định gốc toạ độ cũng như giá trị mỗi đơn vị chiều dài của hệ trục toạ độ
98
Lưu ý là giá trị <width> và <height> của thuộc tính ‘viewBox’ khơng nhận giá trị âm. Nếu thiết lập giá trị âm sẽ gây ra lỗi, nếu thiết lập bằng “0” thì thành phần này khơng được hiển thị.
Ví dụ 1:
Ví dụ sau minh hoạ cách sử dụng thuộc tính ‘viewBox’ trong thành phần ‘svg’ ngồi cùng để trải nội dung SVG vừa khít với biên của khung nhìn.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300px" height="200px" version="1.1"
viewBox="0 0 1500 1000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<desc>Example ViewBox - uses the viewBox
attribute to automatically create an initial user coordinate
system which causes the graphic to scale to fit into the viewport no matter what size the viewport is.</desc>
<!-- This rectangle goes from (0,0) to (1500,1000) in user
space.
Because of the viewBox attribute above,
the rectangle will end up filling the entire area reserved for the SVG content. -->
<rect x="0" y="0" width="1500" height="1000"
fill="yellow" stroke="blue" stroke-width="12" /> <!-- A large, red triangle -->
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/> <!-- A text string that spans most of the viewport --> <text x="100" y="600" font-size="200" font-
family="Verdana" > Stretch to fit </text>
</svg>
Kết quả trên trình duyệt (hình bên trái), hình bên phải là kết quả khi thay đổi
99 thuộc tính width="150px" height="200px".
Để đạt được kết quả bên trái, với khung nhìn 300x200 px, tác nhân người dùng
tự động chèn vào phép biến đổi tỉ lệ transform="scale(0.2)”, kết quả tương đương
cĩ một khung nhìn kích thước 300x200 px và phép biến đổi tỉ lệ bổ sung như sau: <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <g transform="scale(0.2)">
<!-- Rest of document goes here --> </g>
</svg>
Để đạt được kết quả bên phải, với khung nhìn 150x200 px, tác nhân người
dùng tự động chèn vào phép biến đổi tỉ lệ transform="scale(0.1 0.2)”, kết quả tương
đương cĩ một khung nhìn kích thước 150x200 px và phép biến đổi tỉ lệ bổ sung như
sau:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="150px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg"> <g transform="scale(0.1 0.2)">
<!-- Rest of document goes here --> </g>
</svg>
Trong một số trường hợp tác nhân người dùng cần cung cấp một phép tịnh tiến (translate) ngồi phép biến đổi tỉ lệ (sacle). Ví dụ, khi trong thành phần ‘svg’ ngồi cùng , thuộc tính ‘viewBox’ cĩ giá trị <min-x> hay <min-y> khác “0”.
Khơng giống thuộc tính ‘transform’, các phép biến đổi tự động được tạo bởi sự cĩ mặt của thuộc tính ‘viewBox’ khơng ảnh hưởng đến thuộc tính ‘x’, ‘y’, ‘width’, ‘height’ (hay trong trường hợp thành phần ‘marker’, là thuộc tính ‘markerWidth’, ‘markerHeight’) trên thành phần chứa thuộc tính ‘viewBox’ đĩ. Do đĩ trong ví dụ trên, thuộc tính ‘width’ và ‘height’ được tính theo đơn vị đo trong hệ trục toạ độ
100
là nĩ thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các
thành phần con của thành phần chứa tính ‘viewBox’.