Download - Tìm hiểu svg và ứng dụng
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM
HUỲNH NGỌC ĐOÀN - 0112083
LÊ ANH TOÀN - 0112074
TÌM HIỂU SVG
VÀ ỨNG DỤNG
LUẬN VĂN CỬ NHÂN TIN HỌC
GIÁO VIÊN HƯỚNG DẪN
TS DƯƠNG ANH ĐỨC
Th.S LÊ THỤY ANH
NIÊN KHÓA 2001 - 2005
i
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
ii
NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
iii
LỜI CÁM ƠN
Chuùng em xin chaân thaønh caùm ôn Khoa Coâng Ngheä Thoâng
Tin, tröôøng Ñaïi Hoïc Khoa Hoïc Töï Nhieân TpHCM ñaõ taïo ñieàu
kieän toát cho chuùng em thöïc hieän ñeà taøi luaän vaên toát nghieäp
naøy.
Chuùng em xin chaân thaønh caùm ôn Thaày Döông Anh Ñöùc vaø
Thaày Leâ Thuïy Anh ñaõ taän tình höôùng daãn, chæ baûo chuùng em
trong suoát thôøi gian thöïc hieän ñeà taøi.
Chuùng em xin chaân thaønh caùm ôn quyù Thaày Coâ trong Khoa
ñaõ taän tình giaûng daïy, trang bò cho chuùng em nhöõng kieán thöùc
quyù baùu trong nhöõng naêm hoïc vöøa qua.
Chuùng con xin noùi leân loøng bieát ôn saâu saéc ñoái vôùi OÂng
Baø, Cha Meï ñaõ chaêm soùc, nuoâi daïy chuùng con thaønh ngöôøi.
Xin chaân thaønh caùm ôn caùc anh chò vaø baïn beø ñaõ uûng hoä,
giuùp ñôõ vaø ñoäng vieân chuùng em trong thôøi gian hoïc taäp vaø
nghieân cöùu.
Maëc duø chuùng em ñaõ coá gaéng hoaøn thaønh luaän vaên trong
phaïm vi vaø khaû naêng cho pheùp nhöng chaéc chaén seõ khoâng
traùnh khoûi nhöõng thieáu soùt. Chuùng em kính mong nhaän ñöôïc söï
caûm thoâng vaø taän tình chæ baûo cuûa quyù Thaày Coâ vaø caùc
baïn.
Nhoùm thöïc hieän
Huyønh Ngoïc Ñoaøn vaø Leâ Anh Toaøn
07/2005
iv
LỜI NÓI ĐẦU
Sự phát triển của Internet đang vươn tới mọi ngóc ngách trong đời sống kinh
tế, xã hội. Các ứng dụng của Internet đang làm cho cuộc sống ngày hoàn thiện hơn,
rút ngắn khoảng cách về không gian. Các công ty lớn trên thế giới đang chuyển
hướng công nghệ của mình vào siêu xa lộ thông tin. Họ ra sức phát triển các cơ sở
hạ tầng, các ứng dụng, các dịch vụ giá trị gia tăng và các chuẩn mực. Nếu nhà phát
triển nào tạo ra một chuẩn mực tốt thì sẽ chiếm lĩnh được thị trường, lật đổ những
chuẩn mực trước đó. Sự phát triển công nghệ cho Internet đang thu hút các tổ chức,
các công ty ra sức áp đặt các chuẩn mực riêng của mình lên ngành công nghiệp này.
Hệ quả là thế giới đã chứng kiến nhiều sự thay đổi chuẩn mực, kèm theo đó là phí
tổn khi phải chuyển đổi từ định dạng theo chuẩn cũ sang định dạng của chuẩn mới.
Một những sự chuyển đổi đó là sự chuyển đổi từ các định dạng ảnh quét này
sang định dạng ảnh quét khác, chuyển từ định dạng ảnh quét sang định dạng ảnh
véc-tơ. Khi các ảnh đã được mô tả bằng véc-tơ, các hệ nến, các trình soạn thảo và
các ứng dụng đòi hỏi phải có một hệ thống quy ước chung để xử lý. Một loạt các
chuẩn véc-tơ đã ra đời nhưng đều là các định dạng độc quyền của từng công ty. Từ
năm 1999, chuẩn đồ họa véc-tơ SVG đã ra đời đánh dấu sự hợp nhất của các công
ty trong việc xử lý đồ họa véc-tơ.
Sự xuất hiện của SVG đã dẫn đến một loạt ứng dụng đã ra đời, tận dụng được
những ưu điểm của chuẩn này. Trong các ứng dụng của SVG, ứng dụng bản đồ là
thể hiện rõ nhất tính ưu việt của SVG. Như vậy tại sao không tận dụng SVG và GIS
để tạo ra một chương trình tìm kiếm đường đi trên bản đồ?
v
Với ý tưởng trên, chúng em đã chọn và tập trung phát triển đề tài “Tìm hiểu
SVG và xây dựng ứng dụng tìm đường đi trên bản đồ dựa trên đồ họa véc-tơ”.
Nội dung của luận văn được chia làm 5 chương như sau:
Chương 1. Mở đầu: giới thiệu vai trò của đồ họa véc-tơ và GIS. Dẫn nhập
khả năng sử dụng SVG kết hợp GIS để tạo bản đồ, l ý do thực hiện đề tài, đồng thời
giới thiệu sơ lược về đề tài và mục tiêu phải đạt được.
Chương 2. Các vấn đề tổng quan: khái quát về chuẩn véc-tơ cho bản đồ, các
định dạng véc-tơ thông dụng hiện nay và minh họa bằng các ví dụ đơn giản, mô
hình đối tượng tài liệu DOM, ngôn ngữ XML, cũng như trình bày về những điều cơ
bản nhất của hệ thống thông tin địa lý GIS.
Chương 3. Cấu trúc định dạng tập tin SVG: trình bày chi tiết về SVG, các
thành phần chính thường được sử dụng trong đặc tả SVG, kiến trúc nội vi SVG,
kiến trúc ứng dụng SVG.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ
họa véc-tơ SVG: trình bày các vấn đề liên quan trực tiếp đến việc xây dựng ứng
dụng.
Chương 5. Tổng kết: tóm lại các vấn đề đã giải quyết và nêu ra một số hướng
phát triển trong tương lai.
vi
MỤC LỤC
Chương 1 Mở đầu ............................................................................................... 14
1.1 Vai trò của đồ họa véc-tơ trong ứng dụng bản đồ ......................................... 14 1.2 Mục tiêu của đề tài ......................................................................................... 15
Chương 2 Các vấn đề tổng quan ....................................................................... 16
2.1 Tổng quan về chuẩn véc-tơ cho bản đồ ......................................................... 16 2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ .................................................. 16
2.1.1.1 Chuẩn chính thức........................................................................ 16 2.1.1.2 Chuẩn bất thành văn ................................................................... 17
2.1.2 Các định dạng của véc-tơ....................................................................... 18 2.1.2.1 SVF............................................................................................. 18 2.1.2.2 DWF ........................................................................................... 20 2.1.2.3 Flash (còn gọi là SWF)............................................................... 21 2.1.2.4 PGML ......................................................................................... 22 2.1.2.5 WebCGM.................................................................................... 23 2.1.2.6 VML ........................................................................................... 24 2.1.2.7 PDF............................................................................................. 27 2.1.2.8 SVG ............................................................................................ 30 2.1.2.9 VRML......................................................................................... 36 2.1.2.10 HGML ........................................................................................ 37 2.1.2.11 DrawML ..................................................................................... 38
2.1.3 Mô hình DOM ....................................................................................... 39 2.1.4 Ngôn ngữ XML ..................................................................................... 40 2.1.5 Tổng quan về GIS.................................................................................. 42
2.1.5.1 Khái niệm GIS? .......................................................................... 42 2.1.5.2 Các thành phần của GIS ............................................................. 42 2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thông tin dữ liệu GIS ......................... 42 2.1.5.4 Chức năng của GIS..................................................................... 42 2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS............................... 42
Chương 3 Cấu trúc định dạng tập tin SVG...................................................... 44
3.1 Định nghĩa...................................................................................................... 44 3.2 Sự tương thích với các chuẩn khác ................................................................ 44 3.3 Loại MIME của SVG và Không gian tên SVG ............................................ 46
3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh:.. 46 3.3.2 Không gian tên SVG, định danh công cộng và định danh hệ thống: .... 47
3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’ ....................... 47 3.4.1 Tổng quan: ............................................................................................. 47 3.4.2 Thành phần ‘svg’: .................................................................................. 50
3.5 Gom nhóm : thành phần ‘g’: .......................................................................... 52
vii
3.6 Tham chiếu và thành phần ‘defs’:.................................................................. 53 3.6.1 Tổng quan: ............................................................................................. 53 3.6.2 Các thuộc tính tham chiếu URI: ............................................................ 57 3.6.3 Thành phần ‘defs’ .................................................................................. 58
3.7 Thành phần ‘desc’ và ‘title’: .......................................................................... 59 3.8 Thành phần ‘symbol’: .................................................................................... 62 3.9 Thành phần ‘use’:........................................................................................... 62 3.10 Thành phần ‘image’: ...................................................................................... 74 3.11 Các hình cơ bản.............................................................................................. 77
3.11.1 Hình chữ nhật – thành phần ‘rect’ ......................................................... 77 3.11.2 Hình tròn – thành phần ‘circle’.............................................................. 79 3.11.3 Hình e-lip – thành phần ‘ellipse’ ........................................................... 79 3.11.4 Đường thẳng – thành phần ‘line’........................................................... 81 3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ ............................................ 82 3.11.6 Đa giác – thành phần ‘polygon’ ............................................................ 83
3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo ....................................... 84 3.12.1 Giới thiệu ............................................................................................... 84 3.12.2 Khung nhìn ban đầu............................................................................... 85 3.12.3 Hệ trục toạ độ ban đầu........................................................................... 87 3.12.4 Các phép biến đổi hệ trục toạ độ ........................................................... 88 3.12.5 Thuộc tính ‘transform’........................................................................... 95 3.12.6 Thuộc tính ‘viewBox’............................................................................ 97 3.12.7 Thuộc tính ‘preserveAspectRatio’....................................................... 100 3.12.8 Thiết lập khung nhìn............................................................................ 106
3.13 Định kiểu (styling) ....................................................................................... 108 3.13.1 Các thuộc tính định kiểu của SVG ...................................................... 108 3.13.2 Định kiểu dùng thuộc tính trình diễn................................................... 108 3.13.3 Định kiểu bằng CSS............................................................................. 109 3.13.4 Thành phần ‘style’ .............................................................................. 112 3.13.5 Thuộc tính ‘class’ ................................................................................ 112 3.13.6 Phạm vi của trang định kiểu: ............................................................... 113
3.14 Đường xén.................................................................................................... 114 3.14.1 Giới thiệu: ............................................................................................ 114 3.14.2 Đường xén ban đầu.............................................................................. 114 3.14.3 Thuộc tính ‘overflow’ và ‘clip’ .......................................................... 114 3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’ ...... 116 3.14.5 Thiết lập đường xén mới...................................................................... 117
3.15 Thành phần ‘path’ ........................................................................................ 121 3.15.1 Giới thiệu ............................................................................................. 121 3.15.2 Thành phần ‘path’................................................................................ 121 3.15.3 Dữ liệu đường (path data)................................................................... 121
3.16 Thành phần ‘text’ ......................................................................................... 122 3.16.1 Giới thiệu ............................................................................................. 122
viii
3.16.2 Thành phần ‘text’................................................................................. 123 3.16.3 Thuộc tính thiết lập phông chữ cho thành phần ‘text’......................... 126 3.16.4 Thuộc tính canh lề ............................................................................... 127 3.16.5 Thành phần ‘tspan’ .............................................................................. 128 3.16.6 Thành phần ‘tref’ ................................................................................. 131
3.17 Vẽ chữ dọc theo một đường......................................................................... 132 3.17.1 Giới thiệu: ............................................................................................ 132 3.17.2 Thành phần ‘textPath’.......................................................................... 133
3.18 Khả năng ảnh động của SVG - thành phần ‘animate’ ................................. 138 3.18.1 Giới thiệu ............................................................................................. 138 3.18.2 Các thành phần ảnh động..................................................................... 139
3.18.2.1 Tổng quan ................................................................................. 139 3.18.2.2 Mối quan hệ của ảnh động SVG với SMIL Animation............ 139
3.18.3 Ví dụ ảnh động: ................................................................................... 141 3.19 Viết script (kịch bản).................................................................................... 142
3.19.1 Chỉ định ngôn ngữ viết script .............................................................. 142 3.19.1.1 Chỉ định ngôn ngữ viết script mặc định ................................... 142 3.19.1.2 Khai báo cục bộ ngôn ngữ viết script ....................................... 143
3.19.2 Thành phần ‘script’.............................................................................. 143 3.19.3 Quản lý sự kiện.................................................................................... 146 3.19.4 Thuộc tính sự kiện ............................................................................... 146 3.19.5 ECMAScript và DOM ......................................................................... 148
3.19.5.1 Lấy đối tượng tài liệu ............................................................... 148 3.19.5.2 Lấy thành phần gốc................................................................... 148 3.19.5.3 Tạo một node trong cây tài liệu................................................ 148 3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó................. 149 3.19.5.5 Thiết lập thuộc tính sự kiện ...................................................... 149 3.19.5.6 Thiết lập bộ lắng nghe sự kiện.................................................. 149
Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 151
4.1 Các kĩ thuật và công nghệ ............................................................................ 151 4.2 WMS ............................................................................................................ 151 4.3 WFS ............................................................................................................. 152 4.4 GEOSERVER .............................................................................................. 154 4.5 Kiến trúc ứng dụng ...................................................................................... 155 4.6 Client-side .................................................................................................... 156 4.7 Server- side .................................................................................................. 156 4.8 Sơ đồ tương tác chi tiết giữa client và server............................................... 158
4.8.1 Mô tả chi tiết client .............................................................................. 159 4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client............................. 159 4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client ................... 159 4.8.1.3 Tìm đường đi từ giữa hai điểm................................................. 160 4.8.1.4 Vấn đề thay đổi tỉ lệ phóng to thu nhỏ ..................................... 161
ix
4.8.2 Mô tả chi tiết server ............................................................................. 162 4.8.2.1 Mô tả chi tiết “Bản đồ ASPX” ................................................. 162 4.8.2.2 Mô tả “Service tìm đường”....................................................... 163 4.8.2.3 Mô tả Geoserver ....................................................................... 163 4.8.2.4 Mô tả Microsoft SQL Server .................................................... 169
4.8.3 Mô tả chi tiết quá trình tìm kiếm đường đi.......................................... 171
Chương 5 TỔNG KẾT ..................................................................................... 173
5.1 Kết luận ........................................................................................................ 173 5.2 Hướng phát triển: ......................................................................................... 173
Phụ lục A Mô tả bổ sung cho các định dạng véc-tơ ....................................... 174
Phụ lục B Kết quả cài đặt ................................................................................ 190
Tài liệu tham khảo ............................................................................................... 194
x
DANH MỤC CÁC HÌNH
Hình 1.1 Ứng dụng bản đồ SVG của Sở Khoa học và Công nghệ
TP. Hồ Chí Minh....................................................................................................... 12
Hình 2.1 Luồng công việc của VML và HTML ....................................................... 23
Hình 2.2 Minh họa VML .......................................................................................... 25
Hình 2.3 Các thành phần của PDF............................................................................ 27
Hình 2.4 Minh họa đơn giản về SVG ....................................................................... 33
Hình 2.5 Một ví dụ đơn giản về cây phân cấp DOM................................................ 37
Hình 2.6 Kiến trúc và hình thái XML....................................................................... 39
Hình 3.1 Minh họa nội dung SVG được nhúng nội tuyến........................................ 47
Hình 3.2 Minh họa thành phần gom nhóm ‘g’.......................................................... 51
Hình 3.3 Minh họa thành phần ‘defs’ ....................................................................... 57
Hình 3.4 Cây DOM của nội dung SVG cho ví dụ hình chữ nhật tô tuyến tính ........ 57
Hình 3.5 Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’ .......................................... 65
Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ .................................................... 65
Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’ .................................. 66
Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’............................................ 67
Hình 3.9 Minh họa thành phần ‘use’ với thuộc tính ‘transform’.............................. 68
Hình 3.10 Minh họa thành phần ‘use’ với trang định kiểu CSS............................... 69
Hình 3.11 Minh họa thành phần ‘rect’ vuông góc .................................................... 76
Hình 3.12 Minh họa thành phần ‘rect’ tròn góc........................................................ 76
Hình 3.13 Minh họa thành phần ‘circle’ ................................................................... 77
Hình 3.14 Minh họa thành phần ‘ellipse’ ................................................................. 79
Hình 3.15 Minh họa thành phần ‘line’...................................................................... 80
Hình 3.16 Minh họa thành phần ‘polyline’............................................................... 81
Hình 3.17 Minh họa hệ trục tọa độ ban đầu.............................................................. 86
Hình 3.18 Minh họa hiển thị không có phép biến đổi .............................................. 87
Hình 3.19 Minh họa phép tịnh tiến ........................................................................... 89
xi
Hình 3.20 Minh họa phép quay và phép co giãn ...................................................... 90
Hình 3.21 Minh họa phép kéo xiên theo trục X, trục Y............................................ 91
Hình 3.22 Minh họa phép các phép biến đổi lồng nhau ........................................... 93
Hình 3.23 Minh họa thuộc tính ‘viewBox’ ............................................................... 96
Hình 3.24 Minh họa thuộc tính ‘preserveAspectRatio’ .......................................... 104
Hình 3.25 Minh họa thuộc tính ‘fill’....................................................................... 107
Hình 3.26 Minh họa nội dung SVG có tham chiếu đến trang định kiểu CSS ........ 108
Hình 3.27 Minh họa thành phần ‘clipPath’............................................................. 118
Hình 3.28 Minh họa thành phần ‘path’ ................................................................... 120
Hình 3.29 Minh họa thành phần ‘text’ .................................................................... 124
Hình 3.30 Minh họa thành phần ‘tspan’ ................................................................. 127
Hình 3.31 Minh họa thành phần ‘tspan’ có một vị trí đặc biệt ............................... 128
Hình 3.32 Minh họa thành phần ‘tspan’ thiết lập vị trí mới cho mỗi
kí tự trong chuỗi ...................................................................................................... 129
Hình 3.33 Minh họa thành phần ‘tref’ .................................................................... 130
Hình 3.34 Minh họa thành phần ‘textPath’............................................................. 134
Hình 3.35 Minh họa thành phần ‘textPath’ có sử dụng thuộc tính ‘tspan’............. 135
Hình 3.36 Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’ ......... 136
Hình 3.37 Minh họa thành phần ảnh động animateMotion .................................... 140
Hình 3.38 Minh họa chức năng bắt sự kiện chuột .................................................. 142
Hình 3.39 Minh họa bộ timer và thuộc tính mờ ‘opaque’ ...................................... 144
Hình 4.1 Mô hình kiến trúc giao tiếp giữa client và WFS...................................... 150
Hình 4.2 Sơ đồ phân tầng của GeoServer ............................................................... 153
Hình 4.3 Sơ đồ kiến trúc ứng dụng ......................................................................... 154
Hình 4.4 Kiến trúc client-server được cài đặt ......................................................... 155
Hình 4.5 Kiến trúc chi tiết client-server được cài đặt ............................................. 156
Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client.................................... 157
Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện................................................... 158
Hình 4.8 Mô tả chức năng server “Bản đồ ASPX”................................................. 160
xii
Hình 4.9 Mô tả server “Service tìm đường” ........................................................... 161
Hình 4.10 Mô tả Geoserver..................................................................................... 161
Hình 4.11 Kết xuất của Geoserver .......................................................................... 162
Hình A.1 Ví dụ về ảnh VRML................................................................................ 178
Hình B.1 Bản đồ SVG được phát sinh bởi GenerateSVGMap............................... 189
Hình B.2 Bản đồ SVG được hiển thị trong chương trình client ............................. 190
Hình B.3 Minh hoạ chú thích khi rê chuột lên một đối tượng................................ 191
xiii
DANH MỤC CÁC BẢNG BIỂU
Bảng 4.1 Bảng MapNetworkWithLength ............................................................... 167
Bảng 4.2 Bảng MapNetworkArc_AutoWithDirection ........................................... 168
Bảng 4.3 Bảng MapNetworkDanhSachNodeKe..................................................... 168
Bảng A.1 Cấu trúc tập tin Flash.............................................................................. 175
Bảng A.2 Danh sách 18 thẻ của HGML ................................................................. 180
Chương 1. Mở đầu
14
Chương 1 Mở đầu
1.1 Vai trò của đồ họa véc-tơ trong ứng dụng bản đồ
SVG (Scalable Vector Graphics) (Đồ họa véc-tơ khả co) là một chuẩn ra đời
vào năm 1999. SVG là một định dạng đồ họa véc-tơ hỗ trợ các nhà phát triển mô tả
các hình ảnh bằng văn bản. Những năm gần đây, các ứng dụng về SVG ngày càng
được phát triển mạnh trên khắp thế giới, trên các hệ thống máy tính để bàn và gần
đây là trên các thiết bị nhúng chẳng hạn như thiết bị di động.
Tại Việt Nam, việc nghiên cứu SVG cũng đã đạt được một số kết quả đáng
khích lệ. Có thể kể đến kết quả nghiên cứu của Sở Khoa học và Công nghệ TP. Hồ
Chí Minh (http://www.ioit-hcm.ac.vn/map/index.html).
SVG ngày càng phát triển lớn mạnh. Bên cạnh đó là GIS cũng đang chiếm vai
trò quan trọng trong lĩnh vực bản đồ. Việc kết hợp SVG và GIS sẽ tạo ra một hệ
mới được gọi là SVG GIS. Hệ này có chức năng tìm kiếm, tra cứu thông tin bản đồ
đồng thời lại tận dụng được tính ưu việt của SVG. SVG GIS cho phép phóng to bản
đồ đến kích cỡ bất kỳ mà không vỡ ảnh. SVG có thể được xén theo kích thước tùy ý
để truyền tải trên mạng được nhanh chóng. Bản thân SVG đã hàm chứa dữ liệu.
Hình 1.1. Ứng dụng bản đồ SVG của Sở Khoa học và Công nghệ TP. Hồ Chí Minh
Chương 1. Mở đầu
15
Một điều cần lưu ý khi phát triển ứng dụng với SVG là tốc độ hiển thị nội
dung SVG phụ thuộc vào độ phức tạp của nội dung SVG và tốc độ xử lý của máy
tính. Do đó đối với ứng dụng bản đồ SVG, người phát triển cần phải chọn giải pháp
tối ưu nhất là giảm tối đa kích thước tập tin .svg cần hiển thị tại một thời điểm bằng
cách xén nội dung SVG bên trong nó.
1.2 Mục tiêu của đề tài
Hiện nay, trên thế giới, các ứng dụng bản đồ đang chuyển dần sang sử dụng
chuẩn SVG. Các ứng dụng này vô cùng đa dạng, từ quản lý mùa màng, dịch bệnh,
dân số, thời tiết, tội phạm cho đến quản lý đường trong đô thị. Tại Việt Nam, việc
xây dựng một ứng dụng bản đồ SVG cũng rất cần thiết vì sớm hay muộn thì chúng
ta cũng phải thực hiện điều này để tận dụng lợi thế của SVG.
Chính vì xuất phát từ nhu cầu trên, cùng với sự hấp dẫn của công nghệ nên
chúng em đã chọn và xây dựng đề tài “TÌM HIỂU SVG VÀ XÂY DỰNG ỨNG
DỤNG TÌM ĐƯỜNG ĐI TRÊN BẢN ĐỒ DỰA TRÊN ĐỒ HỌA VECTƠ”, với dữ
liệu là bản đồ đường đi trong Thành phố Hồ Chí Minh.
Các chức năng chính của ứng dụng cần phải xây dựng :
- Chương trình đòi hỏi về giao diện : cho phép người dùng duyệt từng phần
trên bản đồ theo các chiều : sang trái, sang phải, lên trên và xuống dưới và cho phép
phóng to, thu nhỏ phần bản đồ đang xem. Đồng thời phải có các luật giao thông như
đường một chiều kí hiệu trên bản đồ để tránh cho người dùng vi phạm. Cho phép
thay đổi các thông số như tỉ lệ phóng to thu nhỏ mỗi lần, tỉ lệ di chuyển.
- Cho phép người dùng tra cứu các tên đường.
- Cho phép người dùng tìm đường đi ngắn nhất giữa 2 đường bằng chỉ dẫn
lời hoặc bằng hình ảnh trực quan.
Chương 2. Các vấn đề tổng quan
16
Chương 2 Các vấn đề tổng quan
2.1 Tổng quan về chuẩn véc-tơ cho bản đồ
2.1.1 Giới thiệu về chuẩn véc-tơ cho bản đồ
Trong lĩnh vực bản đồ, bằng cách sử dụng véc-tơ, chúng ta có thể làm cho việc
tương tác, phân tích, sử dụng các chức năng liên quan đến màn hình trở nên dễ dàng
hơn, chẳng hạn như phóng to thu nhỏ (zoom) và kéo (pan). Chất lượng của các hình
ảnh được tái hiện cũng tăng lên rất đáng chú ý. Cách đây không lâu, chỉ có việc hiển
thị văn bản và ảnh quét (raster image) được tiêu chuẩn hóa. Trong khi đó, bản thân
bản đồ lại cần một lượng các hàm bổ sung. Điều này có thể đạt được bằng cách sử
dụng server scripts hoặc các chỉ thị javascript phức tạp, và bằng cách nạp các ảnh
quét.
Thời điểm cuối năm 1999 đã chứng kiến sự ra đời của một chuẩn mới đầy hứa
hẹn được gọi là SVG (Scalable Vector Graphics). Chuẩn này tạo ra khả năng trang
bị đồ họa véc-tơ cho các web site. SVG được phát triển theo yêu cầu của giới công
nghiệp, nên một lượng lớn các ứng dụng sẽ được phát triển tiếp. Khi xét về mặt lợi
ích cho bản đồ, lần đầu tiên trong lịch sử của web, đã có một chuẩn tuân thủ tối đa
các yêu về đồ họa.
Chuẩn véc-tơ được chia ra làm hai phần:
• Chuẩn chính thức
• Chuẩn bất thành văn
2.1.1.1 Chuẩn chính thức
Các chuẩn chính thức là sự thỏa thuận bằng tài liệu chứa các đặc tả kỹ thuật
hoặc các tiêu chuẩn được sử dụng dưới vai trò là các luật, các hướng dẫn hoặc các
định nghĩa về các chức năng chính. Các chuẩn được tạo ra để đảm bảo rằng các tài
liệu, sản phẩm, qui trình và dịch vụ luôn đúng với mục tiêu ban đầu của nó. Chúng
được chứng nhận bởi các tổ chức về tiêu chuẩn, chẳng hạn như ISO (International
Chương 2. Các vấn đề tổng quan
17
Organization for Standardization = Tổ chức Quốc tế về Tiêu chuẩn hóa) hoặc IEEE
(Institute of Electrical and Electronical Engineers = Viện kỹ sư điện và điện tử Hoa
Kỳ) và được bắt buộc phải sử dụng thông qua các văn bản qui định. ECMA
(European Computer Manufacturer's Assocation = Hiệp hội các nhà sản xuất máy
tính châu Âu) hoặc W3C (World Wide Web Consortium = Tổ chức World Wide
Web) cũng công bố các chuẩn có khả năng trở thành chuẩn chung nhưng không bắt
buộc các nhà sản xuất phải áp dụng chúng. Trong thế giới WWW, có một sự thuận
lợi trong việc cân bằng các ngôn ngữ soạn thảo văn bản. Người dùng có thể viết
một đoạn văn bản không chỉ bằng ngôn ngữ HTML mà còn có thể sử dụng các
thành phần trong các ngôn ngữ hiện có khác (chẳng hạn như “formatting”,
“animating”, “interactivity”). Các thành phần trong các ngôn ngữ khác nhau được
đặt chung với nhau nên cần phải “giao tiếp với nhau”. Việc giao tiếp này chỉ có
được thực hiện thông qua một cú pháp chính xác được cung cấp bởi các chuẩn.
2.1.1.2 Chuẩn bất thành văn
Đây là một tiêu chuẩn hiện đang được chấp nhận và sử dụng rộng rãi mặc dù
không có tổ chức tiêu chuẩn nào thông báo chấp nhận nó. Vì các lý do kỹ thuật, các
công ty phần mềm thường không chấp nhận tất cả các chuẩn bất thành văn của công
ty khác. Mặt khác, vì các lý do thương mại, họ muốn thiết lập các chuẩn riêng của
mình, cố gắng tạo ra một chuẩn bất thành văn mới. Flash là một chuẩn như vậy.
Hậu quả của việc trên là chúng tạo ra một lượng khỗng lồ các chuẩn bất thành
văn. Điều này có nghĩa là các phần của các chuẩn không thể được áp dụng trong
thực tế (chẳng hạn như HTML 4.0). Tiếp theo của việc này là rất nhiều các chuẩn
riêng của các công ty tạo nên vấn đề không tương thích khi kết hợp các sản phẩm,
hoặc khi sử dụng các biến môi trường.
Không phải chỉ có các công ty lớn mới có khả năng tạo ra các chuẩn mới.
Thậm chí một nhóm nghiên cứu cũng có khả năng nghĩ ra và công bố một ý tưởng
nào đó, miễn là nó có được cộng đồng người dùng chấp nhận hay không. Một ví dụ
Chương 2. Các vấn đề tổng quan
18
cho việc này là Tổ chức CERN (European Organization for Nuclear Research = Tổ
chức Nghiên cứu về Hạt nhân của châu Âu) đã tạo ra trình duyệt đồ họa đầu tiên
đang được sử dụng rộng rãi. Một ví dụ khác là Viện Fraunhofer (tại Đức) đã tạo ra
chuẩn nén âm thanh MP3 rất thông dụng hiện nay. Cũng giống như các chuẩn bất
thành văn, nếu thực sự hữu ích, chúng sẽ được chấp nhận trong lĩnh vực thương
mại. Sau đó sẽ được tinh chỉnh và thương mại hóa.
2.1.2 Các định dạng của véc-tơ Các định dạng thông dụng hiện nay trên Internet:
• SVF • DWF • Flash • PGML • WebCGM • VML • PDF • SVG • VRML • HGML • DrawML
Sau đây là mô tả tổng quan từng định dạng trên:
2.1.2.1 SVF
SVF (Simple Vector Format = Định dạng véc-tơ đơn giản) là một định dạng
đồ họa véc-tơ hỗ trợ thông tin về lớp và các siêu liên kết. Nó được SoftSource và
NCSA phát triển nhằm cung cấp một định dạng véc-tơ hai chiều hữu ích trong thế
giới World Wide Web.
Ban đầu SVF được dự định sử dụng cho lĩnh vực trình bày web của các ảnh vẽ
CAD. SVF có một plugin, được giới thiệu vào năm 1996 để tham gia vào việc biểu
diễn các véc-tơ trong thể giới World Wide Web. Sau năm 1997, nó không còn được
phát triển nữa. Các ấn bản tài liệu chỉ hỗ trợ cho các phiên bản thương mại. Hiện
Chương 2. Các vấn đề tổng quan
19
nay, không có bộ chuyển đổi giữa SVF với hai định dạng HPGL và DXF. Các chức
năng của nó: phóng to thu nhỏ không rung (mịn), cửa sổ phóng to thu nhỏ, kéo,
ẩn/hiện các lớp. Việc tương tác bị giới hạn nhiều hơn: các đường thẳng và bề mặt
chỉ có thể được gắn với các siêu liên kết với sự trợ giúp của các chương trình bên
ngoài. Trong việc hiển thị, SVF không hỗ trợ phép khử răng cưa và không có hoạt
ảnh.
SVF được thiết kế thành một định dạng đơn giản để mô tả ảnh véc-tơ. Các đối
tượng vẽ cơ bản gồm có điểm, đường thẳng, đường tròn, cung, đường cong Bezier
và văn bản. Các chức năng của định dạng này bao gồm:
• các lớp (điều khiển sự xuất hiện của các đối tượng)
• các siêu liên kết (cho phép người dùng nhấn vào một vùng của ảnh vẽ để
thực thi một tác vụ)
• các thông báo (gửi các thông điệp khi người dùng vượt qua một mức phóng
to hay thu nhỏ nhất định nào đó)
• các phép tô màu
• khả năng cho phép khai báo lại các màu mặc định
Tập tin SVF được chia thành 3 phần: phần giới thiệu (intro), phần đầu (header)
và phần thân (main). Phần giới thiệu chỉ đơn giản là một chuỗi văn bản xác định tập
tin hiện tại là một tập tin dạng SVF. Phần đầu (header) chứa thông tin tổng quát
dùng trong việc hiển thị và chỉnh sửa ảnh chẳng hạn như các lớp, các phạm vi và
màu sắc. Phần thân mô tả các ảnh và siêu liên kết sẽ được vẽ như thế nào. (xin vui
lòng xem phụ lục A mục 1 để biết thêm về ba phần trên)
Kiểu MIME (Multipurpose Internet Mail Extensions)
Kiểu MIME cho các tập tin SVF là “vector/vnd.svf”. Phần mở rộng của tập tin
theo quy ước là .SVF hoặc .svf.
Cú pháp cho SVF phiên bản 1.1
Chương 2. Các vấn đề tổng quan
20
(Xin vui lòng xem phụ lục A mục 1 để biết thêm về phần này)
(Nguồn: http://www.softsource.com/svf/)
2.1.2.2 DWF
DWF (Drawing Web Format) là một định dạng tập tin mở của hãng Autodesk,
được sử dụng kèm với plugin WHIP4 của AutoDesk. Đây là một trong một vài
plugin sử dụng Javascript. Tập tin theo định dạng DWF được tạo từ các tập tin định
dạng DWG. Các chức năng của định dạng DWF gồm có: kéo (pan), phóng to và thu
nhỏ không bị giật hình (smooth zoom), cửa sổ phóng to thu nhỏ (zoom window),
phóng to thu nhỏ trên một khung nhìn được định nghĩa trước, xếp lớp bên trong và
bên ngoài, và hiển thị các siêu liên kết. Người dùng có thể chèn ảnh và văn bản vào
trong tập tin định dạng DWF. Không có hoạt ảnh trong định dạng tập tin này. Ngoài
ra còn có một phiên bản chạy trên Java applet.
DWF được nhúng vào trong các sản phẩm của hãng Microsoft bằng cách sử
dụng các ActiveX Control. Hai ActiveX Control có thể kể đến là bộ hiển thị DWF
tối ưu và bộ soạn thảo DWF dùng để xem và nhúng các tập tin DWF với đầy đủ
chức năng vào trong các ứng dụng của Microsoft. Hai ActiveX Control này sẽ tăng
cường khả năng chia sẻ và hiển thị các thiết kế bằng cách nhúng các tập tin DWF
vào trong các tài liệu Internet Explorer, PowerPoint, Word, hoặc Excel kèm theo
đầy đủ chức năng kéo, phóng to thu nhỏ và các chức năng khác. Các tập tin DWF
máy chủ (host DWF files) trên các web site có nhiệm vụ chia sẻ các sơ đồ, bản đồ
và các danh mục thành phần (component category) (trong các bản vẽ của các kiến
trúc sư).
Hãng Autodesk cung cấp bộ hiển thị DWF (DWF Viewer) và các hàm giao
diện lập trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs).
Các tài liệu hướng dẫn đi kèm với hai công cụ này sẽ giúp người dùng tùy biến bộ
hiển thị DWF, bộ soạn thảo DWF bên trong các web site và các ứng dụng của hãng
thứ ba. Các tài liệu này cung cấp chỉ dẫn cho các chức năng như định vị đến một
Chương 2. Các vấn đề tổng quan
21
trang chỉ định, hoặc xem và điều khiển sự xuất hiện của các lớp, hoặc điều khiển
khả năng ẩn, hiện thanh công cụ và các menu ngữ cảnh, cũng như tùy biến các ứng
xử của bộ hiển thị.
Người dùng có thể tải bộ hiển thị DWF (DWF Viewer) và các giao diện lập
trình ứng dụng soạn thảo DWF (DWF Viewer và DWF Composer APIs) từ trang
địa chỉ http://www.autodesk.com
(Nguồn: http://www.autodesk.com)
2.1.2.3 Flash (còn gọi là SWF) Định dạng tập tin Macromedia Flash (SWF) (đọc là “swiff”) được dùng để
truyền tải đồ họa véc-tơ và hoạt ảnh qua mạng Internet. Định dạng tập tin SWF
được thiết kế để trở thành một định dạng truyền tải hiệu quả, chứ không nhắm vào
mục đích trao đổi hình ảnh giữa các bộ soạn thảo đồ họa.
Hiện nay, Flash là định dạng véc-tơ tương tác được sử dụng rộng rãi nhất. Nó
đóng vai trò là một plugin Macromedia bên trong trình duyệt. Theo quan điểm của
lĩnh vực bản đồ, đây là chuẩn cập nhật nhất cho việc hiển thị véc-tơ. Flash vẫn chưa
trở thành chuẩn chính thức cho véc-tơ, và trong một thời gian dài tài liệu lập trình
vẫn rất nghèo nàn. Nó là một định dạng nhị phân và độc quyền nên người sử dụng
đòi hỏi phải có mã nguồn mở. Mặc dù vậy, do định dạng này được tạo ra để đáp
ứng nhu cầu của cộng đồng và giới công nghiệp nên nó đã tăng trưởng rất nhanh.
Trong đầu năm 2000, gần 70% trình duyệt đã hỗ trợ định dạng này mà không cần
phải cài đặt phụ trợ (không cần dùng plugin).
Flash không chỉ có khả năng hiển thị đồ họa véc-tơ. Các đoạn phim và nhạc có
thể được tích hợp hoặc phát sinh một cách dễ dàng. Đồ họa của Flash có thể được
xuất ra Macromedia Freehand, Adobe Illustrator hoặc CorelDRAW, đồng thời cũng
có thể được chỉnh sửa bằng trình soạn thảo Macromedia Flash. Có rất nhiều hàm để
tạo hoạt ảnh, tích hợp các hiệu ứng đồ họa đặc biệt. Nhiều ứng dụng đẹp mắt đã
chứng tỏ Flash là một công cụ web linh hoạt, chẳng hạn như cho phép tải dữ liệu
lên mạng liên tục (một trang có thể được hiển thị thậm chí trước khi toàn bộ tập tin
Chương 2. Các vấn đề tổng quan
22
được tải về). Hiện nay Flash gặp rất nhiều vấn đề đối với bản đồ khi tích hợp dữ
liệu bên ngoài và khi chỉnh sửa hoặc tạo các chức năng cần thiết riêng của người
dùng. Các giao tiếp đang được phát triển thêm, nhưng chúng không bao giờ trở
thành chuẩn quốc tế bởi vì Flash đang là sở hữu độc quyền của hãng Macromedia.
Xin vui lòng xem phụ lục A mục 2 để biết thêm chi tiết về các phần sau đây:
• Các mục tiêu thiết kế dành cho SWF
• Cấu trúc của tập tin Flash
• Tối ưu hóa kích thước tập tin SWF
• Nội dung bên trong một tập tin SWF
2.1.2.4 PGML
Precision Graphics Markup Language (PGML)
PGML (Precision Graphics Markup Language) là ngôn ngữ đánh dấu đồ họa
chính xác. Đây là một tập các đặc tả định dạng véc-tơ độc quyền hai chiều dựa trên
văn bản. Nó được thiết kế để đáp ứng cả hai nhu cầu đồ họa véc-tơ của người dùng
thông thường và nhu cầu về độ chính xác của các họa sĩ. Đặc tả này được hãng
Adobe đưa ra từ nền tảng của của PostScript and PDF. Nó được phát sinh thông qua
sự chuyển đổi không liên quan đến PDF. Nó thỏa mãn các yêu cầu nghiêm ngặt và
cung cấp các chức năng tương tác ở cấp cao.
PGML cũng chứa những tính năng phụ trợ để thỏa mãn nhu cầu của các ứng
dụng Web. Nhu cầu về độ chính xác của các họa sĩ được hiểu là các thiết kế đồ họa
xuất hiện trên hệ thống của người dùng cuối phải có đúng với phông chữ, màu sắc,
trình bày và các mối kết hợp mà họ muốn.
Ảnh dạng PGML chứa một tập hợp gồm một hoặc nhiều đối tượng đồ họa
(các đối tượng đường, đối tượng hình học, đối tượng hình ảnh và đối tượng văn
bản). Sự xuất hiện trực quan của một đối tượng khi nó được vẽ sẽ được xác định
từng phần bằng một dãy các tham số. Ví dụ, một đối tượng đường sẽ được tô bằng
một màu xác định, còn một đối tượng văn bản sẽ được vẽ bằng cách sử dụng một
Chương 2. Các vấn đề tổng quan
23
phông xác định. Tập hợp các tham số như vậy được gọi là trạng thái đồ họa. PGML
cung cấp các phương thức để chỉ định các đối tượng, và để xác định các tham số
trong trạng thái đồ họa khi các đối tượng này được vẽ.
Cấu trúc của một tập tin PGML không có nội dung:
2.1.2.5 WebCGM
CGM (Computer Graphics Metafile = Siêu tập tin Đồ họa máy tính) đã trở
thành một chuẩn ISO (ISO/IEC 8632:1999) cho các định nghĩa véc-tơ và định nghĩa
ảnh véc-tơ/ảnh quét từ năm 1987. CGM được thiết kế để đáp ứng nhu cầu của đồ
họa véc-tơ hai chiều. CGM gây được sự chú ý mạnh trong việc minh họa tài liệu kỹ
thuật và tài liệu điện tử tương tác, trực quan hóa dữ liệu địa lý, và trong những lĩnh
vực ứng dụng khác. Nó còn được sử dụng rộng rãi trong lĩnh vực sản xuất ô-tô, máy
bay và công nghiệp quốc phòng.
Bản mô tả CGM là một tập con của chuẩn ISO, và cũng là một tập các đặc tả
hướng đến việc ứng dụng một cách hiệu quả tiêu chuẩn ISO vào việc biểu diễn nội
dung đồ họa hai chiều bên trong tài liệu Web. WebCGM là một bản mô tả cho cách
ứng dụng hiệu quả CGM vào trong các tài liệu điện tử Web. WebCGM là một nỗ
lực hợp tác giữa nghiệp đoàn CGM với đội ngũ W3C, đồng thời cũng được hỗ trợ
từ dự án European Commission Esprit. Nó đóng vai trò như một sự thống nhất quan
trọng giữa phần lớn người sử dụng và người bổ sung đặc tả cho CGM. Do đó nó
hợp nhất các xu hướng đang rời rạc tại thời điểm đó bằng cách tận dụng CGM trong
các ứng dụng tài liệu Web. Các yêu cầu thích ứng rõ ràng và không nhập nhằng của
WebCGM sẽ mở rộng khả năng tương tác của các cài đặt. Do đó, điều này có thể
<?xml version="1.0"?><!DOCTYPE pgml SYSTEM "pgml.dtd"> <pgml> <!-- Chèn các thành phần vẽ ở đây --> </pgml>
Chương 2. Các vấn đề tổng quan
24
tạo ra những công cụ kiểm định CGM sẵn có, các bộ kiểm tra, và các dịch vụ kiểm
tra chứng thực sản phẩm cho các ứng dụng WebCGM.
WebCGM đã được đăng ký là một kiểu đa phương tiện (“image/cgm”) trên
Internet và World Wide Web từ tháng 12 năm 1995. Kiểu MIME (Multipurpose
Internet Mail Extensions) đúng cho WebCGM là:
Mặc dù WebCGM là một định dạng tập tin nhị phân và không thể định kiểu,
nó vẫn tuân theo các yêu cầu mà W3C đã công bố cho một định dạng đồ họa khả co
ở nhưng nơi mà nó có thể được áp dụng. Tiêu chuẩn thiết kế nội dung đồ họa của
WebCGM là nhắm đến sự cân bằng giữa năng lực hiển thị đồ họa và tính đơn giản,
khả năng bổ sung được các định dạng mới vào WebCGM. Một tập nhỏ nhưng mạnh
gồm các thành phần siêu dữ liệu đã được chuẩn hóa trong WebCGM. Do đó
WebCGM hỗ trợ các chức năng như: siêu liên kết và định vị tài liệu, cấu trúc hóa và
phân lớp hình ảnh, tìm kiếm và truy vấn trên nội dung hình ảnh WebCGM.
Các bộ hiển thị và soạn thảo cho CGM đều có thể chạy được trên nhiều hệ
nền khác nhau và đang được chỉnh sửa lại cho phù hợp với đặc tả WebCGM.
2.1.2.6 VML
VML (Vector Markup Language) là ngôn ngữ đánh dấu đồ họa. Nó là một
định dạng véc-tơ hai chiều dựa văn bản, đồng thời cũng là định dạng độc quyền của
hãng Microsoft.
Nó đã được tích hợp vào Internet Explorer, nhưng từ tháng 9/1998 nó không
còn được Microsoft tập trung phát triển nữa. PGML là khởi đầu của một cú pháp
hấp dẫn, nhưng thiếu khả năng mở rộng. Trước khi SVG ra đời, PGML là một xu
hướng đầy hứa hẹn, nhưng bị giới hạn sử dụng trong một hệ nền duy nhất là
Windows.
VML là một phần áp dụng của XML 1.0 (XML = Extensible Markup
Language = ngôn ngữ đánh dấu có thể mở rộng). Nó định nghĩa một định dạng cho
image/cgm;Version=4;ProfileId=WebCGM
Chương 2. Các vấn đề tổng quan
25
việc mã hóa thông tin véc-tơ với các đánh dấu phụ trợ, nhằm diễn tả thông tin sẽ
được hiển thị và chỉnh sửa như thế nào.
Ngôn ngữ đánh dấu véc-tơ (VML = Vector Markup Language) cung cấp các
đánh dấu thông tin đồ họa véc-tơ giống như HTML cung cấp các đánh dấu thông tin
dạng văn bản. Nội dung VML mô tả sự kết hợp của các đường được tạo từ các
đường thẳng và đường cong cơ bản. Các đánh dấu cho biết ý nghĩa và thông tin biểu
diễn của các đường.
VML được viết bằng cách sử dụng cú pháp của XML. Điều này giống như
HTML được viết bằng cách sử dụng cú pháp của SGML (Standard Generalized
Markup Language, [ISO 8879] = Ngôn ngữ đánh dấu được tổng quát hóa theo tiêu
chuẩn) - nghĩa là XML là một dạng được giới hạn lại từ SGML.
VML sử dụng “Các trang định kiểu nạp chồng cấp 2” (Cascading Style Sheets,
Level 2 = CSS2) theo cùng cách mà HTML xác định dạng trình bày của đồ họa véc-
tơ được nó chứa.
Luồng công việc liên quan đến việc xây dựng VML có thể được so sánh với
luồng công việc xây dựng HTML được thể hiện trong hình sau:
Hình 2.1. Luồng công việc của VML và HTML
Chương 2. Các vấn đề tổng quan
26
Điểm khác nhau chính giữa luồng công việc HTML và VML là ở một bước
phần gần cuối trình bày kí tự so với biến đổi đường. Trong nhánh của HTML, luồng
công việc phát sinh các vị trí và các thông tin khác cho một chuỗi các mục chính
(characters) mà sau đó chúng (tức các mục chính) sẽ được xây dựng bằng cách sử
dụng chức năng có sẵn của hệ điều hành.
Trong nhánh của VML, luồng công việc phát sinh các vị trí và các thông tin
liên quan cho các đường véc-tơ và các đối tượng liên quan (chẳng hạn như ảnh
bitmap) mà sau đó chúng (tức các đối tượng liên quan này) sẽ được xây dựng bằng
cách sử dụng chức năng có sẵn của hệ điều hành. Như vậy, sự khác nhau nằm ở chỗ
HTML thì tạo ra các mục chính (characters), trong khi VML tạo ra các đường véc-
tơ và các đối tượng liên quan.
Luồng công việc chung trong hình trên là một phần không thể thiếu của VML.
Hai yêu cầu của quá trình thiết kế là tích hợp VML với HTML sẵn có, đồng thời bỏ
qua việc yêu cầu một tác nhân người dùng (user agent) phải thực hiện lại công việc
đã được hoàn thành. Yêu cầu thứ hai trên được thực hiện bằng cách sử dụng các
biểu diễn khác, hoặc các cài đặt khác của các chức năng HTML hay CSS sẵn có.
Giống như HTML, VML mô tả các đối tượng mà chúng sẽ thường được chỉnh
sửa trong tương lai. Trong trườg hợp của HTML, các đối tượng là các đoạn, các
dạng hoặc các bảng. Còn đối với VML, các đối tượng là các hình hoặc các tập hợp
các hình đã được gom nhóm. VML không yêu cầu một hướng tiếp cận đặc thù nào
để chỉnh sửa – nó cung cấp một số lượng đa dạng các trình soạn thảo. Lượng dữ
liệu đồ họa khỗng lồ buộc VML phải chú ý đến một trình soạn thảo đã ghi lại nhưng
thông tin ngữ nghĩa có liên quan đến mô tả VML. VML luôn đảm bảo rằng các
trình soạn thảo có thể nhận diện và quản lý chính xác dữ liệu của mỗi đối tượng mà
nó quản lý (thậm chí cho dù chúng không phải lúc nào cũng hiểu hết toàn bộ dữ liệu
này)
Chương 2. Các vấn đề tổng quan
27
Một đoạn mã VML:
Hình ảnh xuất hiện trên trình duyệt: Hình 2.2 Minh họa VML
2.1.2.7 PDF
PDF (Portable Document Format = Định dạng tài liệu dễ mang chuyển) là một
định dạng tập tin được sử dụng để biểu diễn một tài liệu theo một cách độc lập với
phần mềm ứng dụng, phần cứng và hệ điều hành được sử dụng để tạo ra nó.
Hiện nay, PDF đã trở thành định dạng được hỗ trợ sẵn trong of Adobe
Illustrator 9. Mục đích thiết kế không nhắm vào WWW, nhưng nó đã được sử dụng
với sự trợ giúp của plugin. Bộ hiển thị của nó, một sản phẩm miễn phí của Adobe,
hoạt động độc lập với trình duyệt. Các tài liệu có thể được bảo vệ bởi mật khẩu khỏi
việc đọc, in ấn và sao chép. Định dạng nhị phân không cho phép các máy tìm kiếm
WWW rà soát thông tin. Với định dạng văn bản thì điều này có thể thực hiện được.
Tuy nhiên nó không phải là giải pháp hay vì kích thước lớn của dữ liệu.
<v:shape style='top: 0; left: 0; width: 250; height: 250' stroke="true" strokecolor="red" strokeweight="2" fill="true" fillcolor="green" coordorigin="0 0" coordsize="175 175"> <v:path v="m 8,65 l 72,65,92,11,112,65,174,65,122,100,142,155,92,121,42,155,60,100
Đoạn mô tả đường bao ngoài của ngôi
Chương 2. Các vấn đề tổng quan
28
PDF chính là một “mô hình ý niệm ngôn ngữ PostScript” (xin vui lòng xem
phụ lục để biết thêm chi tiết)
Cấu trúc của một tập tin PDF
Một tập tin PDF chứa một tài liệu PDF và các thông tin hỗ trợ khác.
Một tài liệu PDF chứa một hoặc nhiều trang. Mỗi trang trong tài liệu có thể
chứa bất kỳ dạng kết hợp nào của văn bản, đồ họa và hình trong một định dạng độc
lập thiết bị và độ phân giải. Đây chính là mô tả trang. Một tài liệu PDF cũng có thể
chứa các thông tin mà chỉ có thể có trong một trang điện tử, chẳng hạn như các siêu
liên kết.
Ngoài ra, một tập tin PDF có thể chứa phiên bản của đặc tả PDF được sử dụng
trong tập tin và thông tin về vị trí của các cấu trúc quan trong trong tập tin.
PDF chính là một mô hình ý niệm ngôn ngữ PostScript (xin vui lòng xem phụ
lục để biết thêm chi tiết).
Ưu điểm của PDF
• Là mẫu mực biểu diễn hình ảnh của Adobe
• Dễ mang chuyển
• Nén/ Mã hóa
• Độc lập phông chữ
• Truy cập ngẫu nhiên
• Cập nhật tăng dần
• Khả năng mở rộng
Chương 2. Các vấn đề tổng quan
29
Các thành phần của PDF
Hình 2.3. Các thành phần của PDF
Thành phần đầu tiên (Objects) là tập hợp các kiểu đối tượng cơ bản được PDF
sử dụng để minh họa các đối tượng. Các kiểu này, trừ một ít ngoại lệ, phụ thuộc vào
các kiểu dữ liệu được sử dụng trong ngôn ngữ PostScript.
Thành phần thứ hai (File structure) là cấu trúc tập tin PDF. Cấu trúc tập tin chỉ
định các đối tượng sẽ được lưu trữ trong một tập tin PDF, cách truy cập và cập nhật
chúng như thế nào. Cấu trúc này độc lập với ngữ nghĩa của các đối tượng.
Thành phần thứ ba (Document structure) là cấu trúc PDF. Cấu trúc này tài liệu
chỉ định các kiểu đối tượng cơ bản được sử dụng để biểu diễn các thành phần của
một tài liệu PDF: các trang, các chú thích, các siêu liên kết, các phông chữ.
Thành phần thứ tư (và cũng là thành phần cuối cùng) (Page Description) là mô
tả trang PDF. Một mô tả trang PDF, khi là thành phần của một đối tượng khác, có
thể được diễn giải độc lập với các thành phần khác. Một mô tả trang chỉ có tương
tác bị giới hạn với các phần khác của một tài liệu PDF. Điều này sẽ đơn giản hóa
việc chuyển đổi nó sang định dạng PostScript.
Chương 2. Các vấn đề tổng quan
30
2.1.2.8 SVG
SVG (Scalable Vector Graphics) là một định dạng mới và mở hoàn toàn được
Tổ chức W3C (World Wide Web Consortium) khuyến khích sử dụng và phát triển.
SVG có tất cả các ưu điểm của Flash (một chuẩn không chính thức hiện nay) cộng
thêm các tính năng sau: các phông chữ nhúng, ngôn ngữ đánh dấu có khả năng mở
rộng (XML), các trang định kiểu (CSS), khả năng tương tác và hoạt ảnh. Với sự hỗ
trợ của DOM (Document Object Model), SVG hoàn toàn tương thích với HTML.
SVG là một chuẩn độc lập nhà sản xuất và miễn phí, được phát triển theo quy
trình của W3C. Nó được hỗ trợ mạnh từ các ngành công nghiệp khác nhau. Đặc tả
SVG được tạo ra từ sự hợp tác của các hãng sản xuất tầm cỡ như include Adobe,
Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, Kodak, Macromedia, Microsoft,
Nokia, Sharp và Sun Microsystems. Các bộ hiển thị SVG được phân phối đến hơn
100 triệu máy tính để bàn (desktop). Bên cạnh đó, nó được hỗ trợ từ rất nhiều các
công cụ soạn thảo.
SVG là một hệ nền cho đồ họa hai chiều. Nó gồm hai phần: một định dạng tập
tin dựa trên XML và một giao diện lập trình API cho các ứng dụng đồ họa. Các
chức năng chính gồm có các vật thể hình học, văn bản và đồ họa ảnh quét được
nhúng, với nhiều kiểu vẽ khác nhau. Nó hỗ trợ các ngôn ngữ như ECMAScript và
có các hỗ trợ thông minh cho hoạt ảnh.
SVG được sử dụng trong nhiều lĩnh vực kinh doanh, bao gồm đồ họa Web,
hoạt ảnh, các giao diện người dùng, trao đổi đồ họa, in ấn, ứng dụng cho thiết bị di
động và thiết kế chất lượng cao.
SVG được xây dựng trên nhiều chuẩn thành công khác chẳng hạn như:
• XML (đồ họa SVG là dạng dựa trên văn bản và do đó rất dễ tạo)
• JPEG và PNG cho các định dạng ảnh
• DOM cho phần viết kịch bản (script) và tương tác
• SMIL cho hoạt ảnh
• CSS cho việc định kiểu
Chương 2. Các vấn đề tổng quan
31
SVG có khả năng tương tác. W3C có nhiệm vụ đưa ra một bộ kiểm tra và các
kết quả cài đặt để đảm bảo tính tương thích.
Các ứng dụng của SVG trong công nghiệp
• Thiết bị di động
Trong năm 2001, ngành công nghiệp điện thoại di động đã chọn SVG là cơ sở
cho hệ nền đồ họa của mình.Nhiều công ty hàng đầu đã tham gia vào nỗ lực phát
triển SVG để tạo ra tập tin đặc tả hiện trang cho bộ SVG Tiny và bộ SVG Basic.
SVG Tiny và SVG Basic là hai tập con của tập đặc tả SVG. Hai bộ này được gọi
chung là SVG Mobile, được tạo ra nhằm hướng đến các thiết bị có tài nguyên hạn
chế chẳng hạn như các thiết bị cầm tay di động và các PDA (Personal Digital
Assistant) (Thiết bị hỗ trợ kỹ thuật số cho cá nhân).
Đặc tả SVG Mobile được 3GPP chọn làm định dạng đồ họa bắt buộc cho các
điện thoại di động thế hệ kế tiếp và cho việc gửi tin nhắn đa phương tiện. Hiện nay,
các thiết bị cầm tay cho phép dùng SVG đã được bán rộng rãi trên thị trường.
SVG Mobile được sử dụng chính cho việc gửi tin nhắn trong các ứng dụng
như thiệp mừng, sơ đồ và các hoạt ảnh (ảnh chuyển động).
• Ấn bản
Sự kết hợp giữa các chức năng đồ họa, các hỗ trợ văn bản mang ngữ nghĩa và
tính độc lập độ phân giải trong SVG đã tạo ra một định dạng thích hợp cho việc in
ấn. Các công ty sản xuất phần cứng in ấn hàng đầu hiện nay đang ra sức phát triển
đặc tả SVG Print. Đây là một phiên bản mới của SVG được mô tả thích hợp cho
công việc kết xuất tài liệu lên giấy tờ.
SVG Print được sử dụng trong các trường họp sau:
o Một ngôn ngữ mô tả trang dựa trên XML tương tự như Postscript và PDF
o Một định dạng lưu trữ ở mức hình thái cuối cùng
o Kỹ thuật in dữ liệu biến đổi, trong đó thông tin vào được cung cấp thông
qua một cơ sở dữ liệu, và thông tin ra được hiển thị bằng cách dùng một mẫu
Chương 2. Các vấn đề tổng quan
32
SVG đồ họa. SVG cung cấp hiển thị dạng cứng (hardcopy) (chẳng hạn như
giấy tờ) và hiển thị trực tuyến đồng nhất.
Vì SVG Print dựa trên nền tảng XML nên nó phù hợp một cách hoàn hảo với
các luồng công việc XML hiện có. Điều này có nghĩa là, nếu các chương trình có
ống dẫn xử lý dữ liệu hỗ trợ XML thì sẽ có thể chèn các khả năng của SVG Print
một cách dễ dàng vào luồng công việc ấn bản của chúng. Việc này cho phép phát
sinh các tài liệu động. SVG Print cũng tích hợp các định dạng mô tả công việc
chúng chẳng hạn như PODi’s PPML và CIP4’s JDF.
• Các ứng dụng Web
Các ứng dụng dựa trên nền đang tăng trưởng rất nhanh và phỗ biến. Các nhà
phát triển thường bị giới hạn bởi vấn đề không tương thích trình duyệt và thiếu các
chức năng. Với sự hỗ trợ mạnh mẽ của ngôn ngữ viết kịch bản (script) và hỗ trợ bắt
sự kiện, SVG có thể được sử dụng dưới dạng một hệ nền mà các ứng dụng giàu
hình ảnh và các giao tiếp người dùng sẽ được xây dựng trên đó.
Với SVG, nhà phát triển ứng dụng sẽ quen với việc sử dụng một tập hợp các
chuẩn mở. Chúng không bị ràng buộc vào một cài đặt chuyên biệt nào, một nhà sản
xuất nào và một công cụ soạn thảo nào.
SVG thích hợp cho thị trường thông dụng chuyên thiết kế đồ họa trong lĩnh
vực hàng không, vận tải, xe hơi và truyền thông. Khả năng mở rộng của XML cho
phép các sơ đồ SVG chứa được các siêu dữ liệu nhúng dưới nhiều định dạng khác
nhau mà không ảnh hưởng đến việc minh họa.
Ví dụ, một chương trình CAD có thể xuất kết quả ra định dạng SVG để hiển
thị trực tuyếm, nhưng đồng thời cũng nhúng dữ liệu vào bên trong tập tin đó để cho
phép người dùng chỉnh sửa nhanh chóng nội dung của tập tin đó.
Cũng như các định dạng khác, hiện nay SVG là định dạng được rất nhiều công
cụ hỗ trợ nhập và xuất dữ liệu. Do đó nó có thể được sử dụng như là một định dạng
trao đổi dữ liệu giữa các ứng dụng.
Chương 2. Các vấn đề tổng quan
33
• GIS và bản đồ GIS (Geographic Information Systems) có các yêu cầu rất rõ ràng: các tính
năng đồ họa phức tạp, hỗ trợ nội dung ảnh quét và véc-tơ và khả năng quản lý một
lượng dữ liệu lớn. SVG hoàn toàn thích hợp cho thị trường này và nhiều hệ thống
GIS đã hỗ trợ kết xuất ra SVG.
Giống như các mục tiêu thiết kế vừa được đề cập ở trên, khả năng mở rộng
SVG và dữ liệu nhúng đặc biệt hữu dụng đối với cộng đồng thực hiện bản đồ. Ví
dụ, các thành phần đồ họa có thể được xem như các đối tượng có sẵn (chẳng hạn
như một hồ nước) trong SVG. Điều này cho phép các ứng dụng giao tiếp với các
đối tượng thông qua ngôn ngữ hình học.
SVG là một phần bổ sung hoàn hảo cho định dạng GML của tổ chức
OpenGIS. GML, cũng dựa trên XML, mô tả các thành phần đồ họa chẳng hạn như
các con sông và các con đường. Dữ liệu theo định dạng GML có thể được chuyển
đổi sang dữ liệu theo định dạng SVG bằng cách sử dụng ống dẫn cho việc hiển thị
trực tuyến.
• Các hệ thống nhúng Phần lớn các hệ thống nhúng đều có các giới hạn khắt khe về tài nguyên,
chẳng hạn như màn hình hiển thị nhỏ hơn, bộ nhớ có dung lượng hạn chế, và khả
năng tính toán bị cắt giảm so với các hệ thống máy tính để bàn thường thấy. Đặc tả
SVG Mobile được thiết kế cho các thiết bị như hệ thống nhúng, đồng thời cho phép
phát triển các giao diện người dùng đồ họa cho các hệ thống này. Trong các hỗ trợ
cho các sự kiện và viết kịch bản, các thiết bị có thể sử dụng SVG dạng nhỏ để điều
khiển và quản lý. Một trong các thiết bị như vậy là một hệ thống điều khiển máy
công nghiệp.
Cấu trúc tài liệu SVG cơ bản: 1 <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
3 "http://www.w3.org/TR/2001/REC-SVG-
Chương 2. Các vấn đề tổng quan
34
20010904/DTD/svg10.dtd">
4 <svg xmlns="http://www.w3.org/2000/svg"
5 Xmlns:xlink="http://www.w3.org/1999/xlink">
6 <-- Nội dung SVG nằm ở đây-->
7 </svg>
Dòng 1 : là một khai báo XML để chỉ định đây là một tài liệu XML thỏa quy
ước của bản đặc tả XML1.0.
Dòng 2,3: là một khai báo kiểu tài liệu XML để chỉ định văn phạm cho tập tin
này. Văn phạm SVG được định nghĩa trong SVG 1.0 DTD.
Dòng 4: là thành phần gốc của tài liệu XML. Chúng ta tạo một thành phần
‘svg’ vì khai báo kiểu tài liệu chỉ định thành phần gốc bắt buộc phải là một thẻ
‘svg’. Thành phần này cũng chỉ định không gian tên XML mặc định cho tài liệu
này.
Thành phần ‘svg’ có nhiều thuộc tính ảnh hưởng cho cả tài liệu SVG.
Dòng 5: dòng này chỉ định không gian tên liên kết ngoài được sử dụng để
tham chiếu ngoại các hình ảnh và các thành phần trong một tài liệu SVG.
Dòng 6: Nội dung của tài liệu SVG
Dòng 7: Đóng thành phần ‘svg’ để hoàn chỉnh tài liệu SVG đúng hình thức.
(Nguồn: http://www.w3.org/Graphics/SVG/Overview.html)
Chương 2. Các vấn đề tổng quan
35
Một ví dụ về SVG:
Ví dụ đơn giản sau vẽ chữ dọc theo một đường cong
Kết quả hiển thị trên trình duyệt:
Hình 2.4. Minh họa đơn giản về SVG
<?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="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap01 - simple text on a path</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go up, then we go down, then up again </textPath> </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Chương 2. Các vấn đề tổng quan
36
2.1.2.9 VRML
VRML (Virtual Reality Modeling Language) là ngôn ngữ mô hình hóa thực tại
ảo, một định dạng tập tin được sử dụng trong việc mô tả các thế giới và các đối
tượng đồ họa tương tác ba chiều. VRML được thiết kế để dùng trong môi trường
Internet, Intranet và các hệ thống máy khách cục bộ (local client). VRML còn được
dự trù trở thành một chuẩn trao đổi đa năng cho đồ họa ba chiều tích hợp và truyền
thông đa phương tiện. VRML có thể được sử dụng trong rất nhiều lĩnh vực ứng
dụng chẳng hạn như trực quan hóa các khái niệm khoa học và kỹ thuật, trình diễn
đa phương tiện, giải trí và giáo dục, hỗ trợ web và chia sẻ các thế giới ảo.
VRML được thiết kế nhằm đáp ứng các yêu cầu sau:
• Là một chuẩn chính thống: cho phép phát triển các chương trình máy tính
có khả năng tạo, chỉnh sửa và bảo trì các tập tin VRML. Bên cạnh đó, người
dùng có thể viết các chương trình dịch tự động cho phép chuyển đổi các
định dạng tập tin ba chiều thông dụng sang các tập tin định dạng VRML.
• Có khả năng kết hợp: Hỗ trợ khả năng sử dụng và kết hợp các đối tượng ba
chiều động bên trong một tổng thể và do đó cho phép tái sử dụng.
• Có thể mở rộng: cung cấp khả năng chèn thêm các kiểu đối tượng mới chưa
được định nghĩa sẵn trong VRML.
• Có nhiều khả năng cài đặt: VRML có thể được cài đặt trên một lượng lớn
các hệ thống máy tính.
• Hiệu suất cao: nhấn mạnh hiệu suất khả co, tương tác trên một lượng lớn
các hệ nền tính toán.
• Tính khả co: cho phép tạo ra các thế giới ba chiều động có độ lớn tùy ý.
Vai trò của VRML
VRML có khả năng biểu thị các đối tượng đa phương tiện, các đối tượng ba
chiều có hoạt ảnh, và các đối tượng ba chiều tĩnh bằng cách sử dụng các siêu liên
kết đến các phương tiện khác như văn bản, âm thanh, phim và hình ảnh. Các trình
Chương 2. Các vấn đề tổng quan
37
duyệt hỗ trợ VRML cũng như các công cụ chính thống để tạo ra các tập tin VRML
có thể chạy trên nhiều hệ nền khác nhau.
VRML cung cấp một mô hình có khả năng mở rộng cho phép người dùng
định nghĩa thêm các đối tượng ba chiều động mới. Điều này cho phép các cộng
đồng lập trình viên phát triển các mở rộng có khả năng tương tác chuẩn cơ bản, có
các ánh xạ giữa các đối tượng VRML và các chức năng giao diện lập trình ứng
dụng ba chiều (3D APIs).
VRML và World Wide Web
Phần mở rộng của tập tin VRML là .wrl (viết tắt từ “world”).
Kiểu MIME chính thức cho tập tin VRML được định nghĩa như sau:
“model/vrml”
trong đó kiểu MIME chính cho các mô tả dữ liệu 3D là “model”, kiểu MIME
phụ cho các tài liệu VRML là “vrml”.
(Ghi chú: MIME = Multipurpose Internet Mail Extensions)
Trong trường hợp cần tạo khả năng tương thích với các phiên bản trước của
VRML, kiểu MIME sau đây sẽ được dùng:
“x-world/x-vrml”
trong đó kiểu MIME chính là “x-world”, kiểu MIME phụ cho các tài liệu
VRML là “x-vrml”.
Một ví dụ về tập tin VRML:
(Xin vui lòng xem ví dụ này ở phụ lục A mục 3)
2.1.2.10 HGML
HGML (Hyper Graphics Markup Language) là ngôn ngữ đánh dấu siêu đồ
họa, được xem là một định dạng nhỏ chuyên dùng cho băng thông hẹp.
HGML cho phép người dùng tải về các tài liệu giàu hình ảnh trên một đường
truyền có băng thông hẹp. Hệ thống này sử dụng các thẻ để triệu gọi các hình ảnh
Chương 2. Các vấn đề tổng quan
38
đồ họa được định nghĩa sẵn bên trong tập tin mà người dùng tải về. Nó được thiết
kế dựa trên các ý tưởng chính như sau:
• Các khuyến cáo của W3C HTML.
• Đặc tả đơn giản.
• Độc lập thiết bị và mạng.
HGML đặc biệt thích hợp cho mạng điện thoại di động, truyền thông không
dây - ở những môi trường mà băng thông cho phép là rất nhỏ.
Đặc tả HGML có các chức năng chính được phân làm ba phần như sau:
• Các đối tượng đồ họa cơ bản
• Chủ đề / sử dụng lại hình ảnh sẵn có
• Chỉnh sửa ảnh
(xin vui lòng xem phụ lục A mục 4 để biết thêm chi tiết về ba phần này)
(Nguồn: http://www.w3.org/TR/NOTE-HGML)
2.1.2.11 DrawML
DrawML là một ứng dụng của XML 1.0. DrawML là một ngôn ngữ đồ họa
khả co được thiết kế để làm cho việc tạo các ảnh kỹ thuật đơn giản trở nên dễ dàng.
Xa hơn nữa (và quan trọng nhất) là DrawML tập trung vào qui trình lưu trữ và tinh
chỉnh một ảnh vẽ. Một ảnh vẽ có thể được cập nhật dễ dàng như tài liệu chứa nó.
DrawML dựa trên các yêu cầu và tiêu chuẩn sau:
• Khi một cấu trúc được thêm vào ảnh vẽ, người dùng có thể định nghĩa
các thuật toán để quản lý việc định vị và thay đổi kích thước của các
thành phần trực quan một cách tự động.
• Ảnh vẽ thông thường không phải là dạng WYSIWYG
Lý do DrawML tập trung vào việc bảo trì chính là tính quan trọng của mạng
Intranet ngày càng tăng. Cho đến nay, công nghệ Internet đã được sử dụng phần lớn
trong việc ấn bản. Những người làm việc bên trong một mạng Intranet mong muốn
tạo và thay đổi các tài liệu một cách nhanh chóng.
Chương 2. Các vấn đề tổng quan
39
Xin vui lòng xem phụ lục A mục 5 để biết thêm chi tiết về các mục sau:
• Các thành phần trong ngôn ngữ DrawML:
• Các khái niệm trong DrawML
(Nguồn: http://www.w3.org/TR/1998/NOTE-drawml-19981203)
2.1.3 Mô hình DOM
Việc tương tác yêu cầu các thành phần riêng biệt của một trang web (gồm cả
các đối tượng véc-tơ được hiển thị) phải có khả năng phản hồi. Không có hướng
tiếp cận độc quyền nào ở trên đáp ứng được ý tưởng này. Để liên lạc với các đối
tượng riêng biệt, cần phải có một cây phân cấp đối tượng rõ ràng (cây phân cấp
được mô tả trong hình ở dưới). Trong cây phân cấp này, thành phần cao nhất
(uppermost member) là trang web. Tất cả các đối tượng bên trong một trang web
cho trước có thể được liên lạc đến thông qua cấu trúc cây này. Bên trong một trang
web thông thường, các sơ đồ phân cấp sau có thể được áp dụng (sơ đồ này đã được
đơn giản hóa):
Hình 2.5. Một ví dụ đơn giản về cây phân cấp DOM
Chương 2. Các vấn đề tổng quan
40
Cây phân cấp đối tượng này được gọi là Mô hình Đối tượng Tài liệu (DOM).
Nó biểu diễn một phương pháp hiệu quả cho việc triệu gọi các thành phần của một
trang web. Trong trường hợp của bản đồ, ý nghĩa của cây phân cấp cũng tương tự
như vậy. Do đó một chuẩn véc-tơ mới cần phải tuân theo DOM. Ở mức ý niệm, các
plugin có thể được tích hợp vào trong DOM. Tuy nhiên, cây phân cấp nằm dưới
một plugin thường thích hợp cho các chức năng tuyệt vời của plugin, và không
được tạo ra để làm thuận tiện việc giao tiếp giữa plugin với toàn bộ môi trường.
Điểm này cực kỳ quan trọng cho việc tương tác và thường gây ra xung đột.
2.1.4 Ngôn ngữ XML
Ý tưởng ban đầu ngôn ngữ XML chính là ngôn ngữ HTML (Hypertext
Markup Language), một ngôn ngữ dùng để phân chia nội dung, cấu trúc và định
dạng một cách chặt chẽ cho các phương tiện kết xuất khác nhau. CSS (Cascading
Style Sheets) trong trường hợp này có chức năng là trung tâm trình bày của các
thành phần trong trang web, cũng giống như việc định vị chínhh xác một ảnh điểm.
Việc truy cập thông qua DOM được đảm bảo bởi một giao tiếp và cú pháp
được chuẩn hóa. XML là một chuẩn đa năng cho các tài liệu web có cấu trúc, cho
sự độc lập tối đa về mạng và hệ nền. Khi sử dụng XML, các tài liệu hoàn toàn thích
hợp cho việc trao đổi dữ liệu và cho các mọi loại ứng dụng. XML có khả năng mở
rộng nên đã trở thành nền tảng của các hình thức ngôn ngữ cao hơn như SMIL (đa
phương tiện), SVG (đồ họa vec-tơ), MathML (các định dạng và ký hiệu toán học
đặc biệt), X3D (đồ họa 3 chiều), XHTML (hậu duệ của HTML), XFORM (phát
sinh mẫu), GML (địa lý). Các mở rộng từ các tổ chức chuyên nghiệp hoặc thậm chí
các cá nhân có thể đem lại hiệu quả, miễn là DTD (Document Type Difinition =
Định nghĩa kiểu tài liệu) được thêm vào. Một vài mở rộng được sử dụng đang được
W3C chuyên nghiệp hóa, chuẩn hóa và quản lý.
Chú thích: • SMIL = Synchronized Multimedia Language = Ngôn ngữ đa phương tiện
đồng bộ hóa
Chương 2. Các vấn đề tổng quan
41
• SVG : Scalable Vector Graphics = Đồ họa véc-tơ khả co
• MathML : Mathematical Markup Language = Ngôn ngữ đánh dấu toán học
Hình 2.6. Kiến trúc và hình thái XML
Dữ liệu thực luôn sẵn sàng trong một tập tin XML, một tập tin được tạo thành
từ các thực thể (được nhận biết thông qua các thẻ “tag”) và các thuộc tính. Việc
kiểm tra cấu trúc và cú pháp được thực hiện trong DTD (Document Type Difinition
= Định nghĩa kiểu tài liệu). DTD định nghĩa các kiểu dữ liệu, các không gian tên
(các thẻ định danh tác giả), cây phân cấp và phần giao giữa các ngôn ngữ. Các
thành phần tùy chọn và các thuộc tính có thể có của chúng được định nghĩa ngang
cấp nhau. Các DTD được các bộ phân tích (parser) sử dụng trong khi đó vẫn khả
dụng trong tất cả các ngôn ngữ lập trình, cũng như trong các phiên bản mới của
trình duyệt. Mục tiêu của DTD là kiểm tra các tập tin DTD và phát hiện lỗi.
Các công nghệ liên quan XML gồm có:
• XSL (XstyleSheets): hậu duệ của CSS, có khả năng định dạng nội dung
• XLL (XlinkingLanguage): có khả năng liên kết các thành phần và phương
tiên lại với nhau
• XQL (XqueryLanguage): cho phép truy vấn có cấu trúc dữ liệu XML
Danh sách này có thể được mở rộng trong tương lai. Điều này có nghĩa là các
véc-tơ nên được biểu diễn theo phương thức tương thích với XML.
Chương 2. Các vấn đề tổng quan
42
2.1.5 Tổng quan về GIS
2.1.5.1 Khái niệm GIS?
GIS(Geographic information system-hệ thống thông tin địa lý) là một hệ thống
dữ liệu hỗ trợ con người quản lý, khai thác và sử dụng một cách hiệu quả các thông
tin địa lý.
2.1.5.2 Các thành phần của GIS Một hệ thống GIS gồm 4 thành phần cơ bản sau:
- Phần cứng (hardware): máy tính được sử dụng để thực hiện các tác vụ của
GIS.
- Phần mềm (software): các phần mềm cung cấp các chức năng và công cụ
về GIS.
- Dữ liệu địa lý (geographic data): đây là thành phần quan trọng nhất, lưu trữ
thông tin địa lý.
2.1.5.3 - Chuyên viên (personnel): nhân viên, chuyên viên phân tích, thiết kế, phát triển, bảo trì hệ thống thông tin dữ liệu GIS
2.1.5.4 Chức năng của GIS
GIS được thiết kế nhằm cho phép người sử dụng phân tích, truy vấn dữ liệu
không gian. GIS tăng cường khả năng liên kết dữ liệu, tài nguyên với nhau. GIS còn
hỗ trợ giúp con người đưa ra các giải pháp tốt hơn trong các quá trình khảo sát địa
lý, điều tra, giải quyết tranh chấp lãnh thỗ,… một cách trực quan và có hiệu quả.
GIS cho phép số hóa lưu trữ dữ liệu bản đồ hết sức dễ dàng và linh hoạt, cho phép
hiệu chỉnh dữ liệu một cách dễ dàng. Đồng thời từ đó có thể sao chép và in ấn bản
đồ.
2.1.5.5 Các ứng dụng cơ bản trong thực tế của GIS
Với mô hình quản lý dữ liệu không gian, GIS đóng vai trò hết sức quan trọng
trong rất nhiều lĩnh vực như: môi trường, thủy văn, y tế, giao thông, nông nghiệp,…
Chương 2. Các vấn đề tổng quan
43
GIS hỗ trợ thu thập thông tin về tự nhiên như các tiến trình xóa mòn đất, bảo
tồn sinh thái, thay đổi khí hậu, thiên tai, lũ lụt, quản lý sủ dụng đất, nghiên cứu về
đất trồng trọt, quản lý tưới tiêu, các vùng quy hoạch đô thị, quản lý dân cư, phân
tích địa bàn tội phạm, nghiên cứu dịch bệnh,…
Một khả năng thiết thực và có sức thu hút rất lớn hiện nay đó là ứng dụng của
GIS trong giao thông. Hỗ trợ định vị, di chuyển, xác định lộ trình trong vận tải hàng
hải, đường bộ,… giải quyết ách tắc giao thông. GIS gắn liền với hệ thống định vị
toàn cầu GPS (Global Position System) - (đây là một công nghệ đang được sử dụng
rộng rãi ở Mỹ và Canada)
GIS còn có ý nghĩa rất lớn trong chính trị, quân sự.
Chương 3. Cấu trúc định dạng tập tin SVG
44
Chương 3 Cấu trúc định dạng tập tin SVG
3.1 Định nghĩa
SVG là viết tắt của Scalable Vector Graphics (tạm dịch là đồ họa véc-tơ khả
co). SVG là ngôn ngữ dành cho nội dung giàu dồ hoạ. SVG là ngôn ngữ mô tả đồ
họa véc-tơ hai chiều bằng ngôn ngữ XML (eXtensible Markup Languge- ngôn ngữ
ngữ có khả năng mở rộng). SVG cho phép ba loại đối tượng đồ họa: các hình học
đồ họa véc-tơ (ví dụ, các đường thẳng và đường cong), các ảnh đồ họa và chữ. Các
đối tượng đồ họa có thể được nhóm lại, được định kiểu, biến đối và được kết hợp từ
các đối tượng được xây dựng trước đó .Tập tính năng của SVG bao gồm các phép
biến đổi, các đường xén, mặt nạ trong suốt, các hiệu ứng lọc và các đối tượng mẫu.
Ảnh đồ họa SVG khả tương tác và khả động. Các ảnh động có thể được định
nghĩa và kích hoạt bằng cách khai báo các thành phần ảnh động nhúng trực tiếp
trong nội dung SVG hoặc bằng cách viết kịch bản (script).
Các chương trình ứng dụng phức tạp với SVG có thể được thực hiện dựa vào
ngôn ngữ viết kịch bản (script) kèm theo để truy cập vào tất các thành phần trong
mô hình đối tượng tài liệu SVG (SVG DOM – SVG Document Object Model). Một
tập đầy đủ các bộ quản lý sự kiện (event handlers) chẳn hạn onmouseover và
onclick được gắn vào các đối tượng đồ họa để người dùng có thể tương tác với các
đối tượng đồ hoạ này. Do khả năng tương thích của nó với các chuẩn Web nên các
tính năng như viết kịch bản có thể được làm đồng thời ngay trên XHTML và SVG
trong cùng một trong Web.
3.2 Sự tương thích với các chuẩn khác
SVG tương thích với các chuẩn và các đặc tả W3C khác. Vì tương thích và
thoả mãn với các chuẩn khác nên SVG trở nên mạnh mẽ và dễ dàng cho người dùng
học hỏi và tích hợp SVG vào các trang Web của họ
SVG tương thích với các kết quả khác của W3C là vì:
Chương 3. Cấu trúc định dạng tập tin SVG
45
• SVG là một ứng dụng của XML và có thể tương thích với XML 1.0
được đưa ra.
• SVG tương thích với “các không gian tên (namespace)” trong XML
được tiến cử.
• SVG dùng ngôn ngữ liên kết XML (XML Linking Languge-XLINK)
cho tham chiếu URL và mong muốn hỗ trợ các đặc tả URL cơ bản
trong XML-base.
• Cú pháp của SVG cho việc tham chiếu các ID thành phần là một tập
con có thể tương thích của cú pháp tham chiếu ID thành phần trong
ngôn ngữ con trỏ XML (XML Pointer Language-XPointer).
• Nội dung SVG có thể định kiểu bằng các trang định kiểu phân cấp
CSS (Cascading Style Sheets Level 2) hay các biến đổi XSL (XSL
Transformation Version 1.0-XSLT).
• SVG hỗ trợ cùng hướng tiếp cận và các thuộc tính đối với CSS và
XSL, cộng thêm ngữ nghĩa và tính năng của CSS.
• Các trang định kiểu bên ngoài được tham chiếu bằng cách dùng cơ
chế kết hợp trang định kiểu với tài liệu XML 1.0.
• SVG có một mô hình đối tượng tài liệu hoàn chỉnh (DOM) và thoả
DOM cấp 1 được đưa ra. SVG DOM có mức tương thích và kiên định
cao với HTML DOM được định nghĩa trong trong đặc tả DOM cấp 1.
Hơn thế nữa, SVG DOM hỗ trợ và kết hợp với nhiều khả năng được
mô tả trong DOM cấp 2, bao gồm cả mô hình đối tượng CSS và quản
lý sự kiện.
• SVG kết hợp nhiều tính năng và tiếp cận của ngôn ngữ tích hợp đa
phương tiện không đồng bộ (Synchronized Multimedia Integration
Language- SMIL1.0), bao gồm thành phần ‘switch’ và thuộc tính
systemLanguage.
• Các tính năng ảnh động của SVG được hợp tác phát triển với nhóm
nghiên cứu đa phương tiện không đồng bộ W3C (W3C Synchronized
Chương 3. Cấu trúc định dạng tập tin SVG
46
Multimedia –SYMM Working Group), và các nhà phát triển của
SMIL 1.0. Các tính năng ảnh động của SVG kết hợp và mở rộng các
khả năng ảnh động XML mục đích chung được mô tả trong đặc tả ảnh
động SMIL (SMIL Animation).
• SVG được thiết kế để trong tương lai các phiên bản của SMIL có thể
dùng SVG tĩnh hay động như các thành phần phương tiện truyền
thông (Animation).
• SVG cố gắng để đạt được sự tương thích lớn nhất với của HTML 4 và
XHTML 1.0. Nhiều khả năng của SVG được làm theo HTML, bao
gồm cả việc sử dụng trang định kiểu CSS, sự tiếp cận việc quản lý sự
kiện, và tiếp cận của nó với mô hình đối tượng tài liệu (DOM).
• SVG có thể tương thích với các chuẩn W3C trong quá trình quốc tế
hoá các chuẩn.
• SVG có thể tương thích với các chuẩn W3C trong khả năng truy cập
Web.
• Trong các môi trường hỗ trợ văn phạm XML khác (ví dụ, XHTML)
cũng như hỗ trợ SVG và SVG DOM, thì tiếp cập viết kịch bản đơn
giản có thể được dùng đồng thời cho cả tài liệu SVG và đồ hoạ SVG,
trong trường hợp đó hiệu ứng động và tương tác sẽ có thể áp dụng
trên nhiều không gian tên XML dùng cùng tập kịch bản.
3.3 Loại MIME của SVG và Không gian tên SVG
3.3.1 Loại MIME của SVG, mở rộng tên tập tin và loại tập tin Macintosh:
Loại MIME cho SVG là “image/svg+xml”. Việc đăng kí loại MIME này
đang được tiến hành tại tổ chức W3C.
Tập tin SVG có mở rộng là “.svg” trên tất cả các hệ nền, và mở rộng cho
tập tin nén của SVG là “.svgz” trên tất cả các hệ nền.
Chương 3. Cấu trúc định dạng tập tin SVG
47
Người ta khuyến cáo rằng, khi lưu trữ tập tin SVG trên hệ thống tập tin
HFS của Macintosh thì nên lưu với mở rộng “svg” với khoảng trắng cuối, và tập
tin SVG nén là “svgz”.
3.3.2 Không gian tên SVG, định danh công cộng và định danh hệ thống:
Sau đây là không gian tên của SVG 1.1, định danh công cộng và định danh
hệ thống.
Không gian tên SVG:
http://www.w3.org/2000/svg
Định danh công cộng cho SVG 1.1:
PUBLIC “-//W3C//DTD//DTD SVG 1.1//EN”
Định danh hệ thống cho SVG 1.1 đã tiến cử:
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
Sau đây là một ví dụ khai báo loại tài liệu cho một tài liệu SVG:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Chú ý DTD được liệt kê trong định danh hệ thống là một DTD mô-đun hoá
(nội dung của nó được trải ra trên nhiều tập tin), nghĩa là một bộ kiểm tra hiệu
lực sẽ phải tìm về hết các mô-đun để kiểm tra giá trị. Vì thế, có một DTD đơn
tương ứng với DTD mô-đun hoá cho SVG 1.1.Nó có thể được tìm thấy tại địa
chỉ http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd.
3.4 Định nghĩa một phân đoạn tài liệu SVG : thành phần ‘SVG’
3.4.1 Tổng quan: Một phân đoạn tài liệu SVG bao gồm các thành phần SVG chứa trong một
thành phần ‘svg’.
Chương 3. Cấu trúc định dạng tập tin SVG
48
Một phân đoạn tài liệu SVG có thể rỗng, nghĩa là thành phần ‘svg’ không
có nội dung gì cả. Một phân đoạn tài liệu SVG đơn giản chỉ chứa một thành
phần đồ hoạ SVG đơn giản như thành phần ‘rect’ – hình chữ nhật. Một phân
đoạn tài liệu SVG phức tạp có thể bao gồm nhiều thành phần vật chứa và các
thành phần đồ hoạ lồng vào nhau.
Một phân đoạn tài liệu SVG có thể đứng độc lập như là một tập tin SVG,
hay là con của một thành phần ‘svg’ khác, trong trường hợp này thì phân đoạn
tài liệu SVG có thể xem là một tài liệu SVG, hoặc nó có thể được nhúng nội
tuyến trong một tài liệu XML cha.
Sau đây là một ví dụ nội dung SVG đơn giản được nhúng nội tuyến trong
một tài liệu XML cha. Chúng ta sẽ dùng không gian tên XML để chỉ định các
thành phần ‘svg’ và ‘ellipse’ thuộc về không gian tên SVG tường minh.
<?xml version="1.0" standalone="yes"?> <parent xmlns="http://example.org" xmlns:svg="http://www.w3.org/2000/svg"> <!-- parent contents here --> <svg:svg width="4cm" height="8cm" version="1.1"> <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /> </svg:svg> <!-- ... --> </parent>
Tiếp theo là một ví dụ phức tạp, gồm nhiều hình chủ nhật, của một tài liệu
SVG độc lập.
Chương 3. Cấu trúc định dạng tập tin SVG
49
<?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="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Four separate rectangles </desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> <!-- Show outline of canvas using 'rect' element --> <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
Kết quả trên trình duyệt sẽ là:
Hình 3.1 Minh họa nội dung SVG được nhúng nội tuyến
Các thành phần phần ‘svg’ có thể xuất hiện ở giữa nội dung SVG. Đây là cơ
chế để nhúng một phân đoạn tài liệu SVG vào một phân đoạn tài liệu SVG khác.
Thành phần ‘svg’ có thể xuất hiện giữa nội dung SVG để thiết lập khung nhìn
mới cho phân đoạn tài liệu mới.
Trong tất cả các trường hợp, để thoả mãn không gian tên ngôn ngữ XML đưa
ra, thì không gian tên SVG phải được khai báo để các thành phần SVG được chỉ
định thuộc về một không gian tên SVG. Sau đây là các cách khai báo không
gian tên.
Chúng ta có thể dùng thuộc tính không gian tên xmlns không có tiền tố
không gian tên chỉ định trong thành phần ‘svg’. Khi đó SVG là một không gian
Chương 3. Cấu trúc định dạng tập tin SVG
50
tên mặc định cho tất cả các thành phần trong phạm vi của thành phần ‘svg’ này
với thuộc tính xmlns như sau:
<svg xmlns="http://www.w3.org/2000/svg"...> <rect .../> </svg>
Nếu tiền tố không gian tên được chỉ định trong thuộc tính xmlns (ví dụ,
xmlns:svg=”http://www.w3.org/2000/svg”), thì không gian tên SVG không còn
là không gian tên mặc định nữa. Vì thế tiền tố không gian tên được gán rõ ràng
cho mỗi thành phần trong phân đoạn tài liệu SVG đó:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"...> <svg:rect .../> </svg:svg>
Và điều cuối cùng trong phần này cần lưu ý là các tiền tố không gian tên
cũng có thể được chỉ định trong thành phần cha mà không nhất thiết phải là
thành phần ‘svg’.
3.4.2 Thành phần ‘svg’: Các thuộc tính của thành phần ‘svg’:
xmlns:[:prefix] = “tên nguồn tài nguyên”
Là thuộc tính XML chuẩn được dùng để định danh một không gian
tên XML.
version= “<number>”
Chỉ định phiên bản ngôn ngữ SVG mà phân đoạn SVG có thể thoả
mãn. Với SVG 1.0, thuộc tính này có giá trị “1.0”. Đối với SVG 1.1,
thuộc tính này nhận giá trị “1.1”.
baseProfile= profile –name
Thuộc tính này mô tả hiện trạng ngôn ngữ SVG nhỏ nhất cần để xây
dựng nội dung chính xác. Nó không chỉ định bất kỳ ràng buộc
xử lý nào cho tác nhân người dùng (user agent); nó có thể được
xem là siêu dữ liệu .Ví dụ, giá trị thuộc tính này có thể được
Chương 3. Cấu trúc định dạng tập tin SVG
51
dùng bởi một công cụ tạo nội dung SVG để cảnh báo người
dùng khi họ chỉnh sửa tài liệu vượt quá phạm vi của
baseProfile được chỉ định. Mỗi tập tin hiện trạng SVG
(baseProfile) nên định nghĩa một chuỗi tương ứng cho thuộc
tính này.
Mặc định giá trị thuộc tính này là ‘none’ được chỉ định.
x=”<coordinate>”
Thuộc tính này không có ý nghĩa hay ảnh hưởng gì tới thành phần
‘svg’ ngoài cùng. Nó là toạ độ trục x góc trái trên của phạm vi hình
chữ nhật (khung nhìn) mà thành phần ‘svg’ được nhúng vào sẽ được
hiển thị.
Giá trị mặc định là 0.
y=”<coordinate>”
Thuộc tính này không có ý nghĩa hay ảnh hưởng gì tới thành phần
‘svg’ ngoài cùng. Nó là toạ độ trục y của góc trái trên của phạm vi
hình chữ nhật mà thành phần ‘svg’ được nhúng vào sẽ được hiển thị.
Giá trị mặc định là 0.
width= “<length>”
Đối với các thành phần ‘svg’ phía ngoài thì thuộc tính này cho biết
độ rộng thực sự của phân đoạn tài liệu SVG. Còn đối với các thành
phần ‘svg’ được nhúng vào thì đây là độ dài của phạm vi hình chữ
nhật mà thành phần ‘svg’ này sẽ được đặt vào.
Nếu giá trị thuộc tính này âm thì có lỗi phát sinh.
Giá trị mặc định là 100%.
height = “<length>”
Đối với các thành phần ‘svg’ phía ngoài thì thuộc tính này cho biết
chiều cao thực sự của phân đoạn tài liệu SVG. Còn đối với các thành
phần ‘svg’ được nhúng vào thì đây là chiều cao của phạm vi hình chữ
nhật mà thành phần ‘svg’ này sẽ được đặt vào.
Chương 3. Cấu trúc định dạng tập tin SVG
52
Nếu giá trị này âm thì có lỗi phát sinh.
Giá trị mặc định là 100%.
Nếu một tài liệu SVG được tham chiếu như một thành phần của tài liệu khác
thì chúng ta nên thêm thuộc tính viewBox trong thành phần ‘svg’ ngoài cùng
của tài liệu được tham chiếu. Thuộc tính này cung cấp một cách thuận tiện để
thiết kế tài liệu SVG vừa vặn với một khung nhìn tuỳ biến chỉ định.
3.5 Gom nhóm : thành phần ‘g’:
Thành phần ‘g’ là một thành phần vật chứa để nhóm các thành phần đồ hoạ
với nhau. Khi gom nhóm kết hợp với các thành phần ‘desc’- mô tả và thành
phần ‘title’ - tiêu đề sẽ cung cấp thông tin về cấu trúc tài liệu và nhiều ngữ nghĩa
hơn. Các tài liệu giàu cấu trúc sẽ tăng khả năng truy xuất hơn.
Một nhóm các thành phần, cũng như các đối tượng đơn lẻ, có thể được cung
cấp một định danh bằng thuộc tính id. Việc đặt tên nhóm là cần thiết trong
trường hợp tạo ảnh động hay các đối tượng dùng lại.
Ví dụ: <?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="5cm" height="5cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Two groups, each of two rectangles </desc> <g id="group1" fill="red" > <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g> <g id="group2" fill="blue" > <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> <!-- Show outline of canvas using 'rect' element --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
53
Kết quả trên trình duyệt sẽ là:
Hình 3.2. Minh họa thành phần gom nhóm ‘g’
Một thành phần SVG có thể chứa các thành phần ‘g’ lồng vào trong nó đến
một độ sâu thích hợp.
Ví dụ: <?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="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Groups can nest </desc> <g> <g> <g> </g> </g> </g> </svg>
Còn bất kỳ thành phần SVG nào không chứa trong thành phần ‘g’ thì đựơc
xem như là một nhóm riêng.
3.6 Tham chiếu và thành phần ‘defs’:
3.6.1 Tổng quan: SVG mở rộng khả năng dùng các tham chiếu URI tới các đối tượng khác. Ví
dụ, để tô một hình chữ nhật với màu tuyến tính, thì trước tiên chúng ta cần định
nghĩa một thành phần 'linearGradient' và gán cho nó một ID như sau:
Chương 3. Cấu trúc định dạng tập tin SVG
54
<linearGradient id="MyGradient">...</linearGradient>
Sau đó trong thành phần ‘rect’ chúng ta có thể dùng thuộc tính ‘fill’ tham
chiếu tới thành phần ‘linearGradient’ trên như sau: <rect style="fill:url(#MyGradient)"/>
Tham chiếu URI được định nghĩa theo các dạng sau: <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ] -hay- <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
<elementID> là định danh của thành phần được tham chiếu
<absoluteURI> là URI tuyệt đối
<relativeURI> là URI tương đối
#<elementID> và #xpointer(id(<elementID>)) là các phát biểu theo cú pháp
tương thích với ngôn ngữ con trỏ XML (XML Pointer Language - XPointer).
SVG hỗ trợ hai kiểu tham chiếu URI:
• Tham chiếu URI cục bộ (local URI references), khi đó tham chiếu
URI không chứa <absoluteURI> hay <relativeURI> và do đó chỉ chứa
định danh của phân đoạn được tham chiếu là #elementID hay
#xpointer(id<elementID>).
• Tham chiếu URI không cục bộ (non-local URI references), khi đó
tham chiếu URI chứa hoặc <absoluteURI> hoặc <relativeURI>
Sau đây là các nguyên tắc xử lý của tham chiếu URI:
• Các tham chiếu URI tới các nút (node) không tồn tại sẽ xem như một
tham chiếu không hợp lệ.
• Các tham chiếu URI tới các thành phần không đúng với tham chiếu
được cho cũng sẽ được xem như một tham chiếu không hợp lệ, ví dụ
thuộc tính ‘clip-path’ chỉ có thể tham chiếu tới thành phần ‘clipPath’.
Thiết lập thuộc tính clip-path:url(#MyElement) là một tham chiếu
Chương 3. Cấu trúc định dạng tập tin SVG
55
không hợp lệ nếu thành phần được tham chiếu (MyElement) không
phải là ‘clipPath’.
• Tham chiếu URI tham chiếu trực tiếp hay gian tiếp ngược trở lại nó là
một tham chiếu vòng không hợp lệ.
Như vậy SVG có các thành phần và thuộc tính cho phép tham chiếu và cũng
có các thanh phần và thuộc tính không cho phép tham chiếu. Đối với các thành
phần được tham chiếu thì sẽ có thành phần được tham chiếu là hợp lệ cho tham
chiếu này nhưng không hợp lệ cho tham chiếu khác tới nó. Sau đây sẽ là phần
liệt kê mô tả một số thành phần và thuộc tính cho phép tham chiếu và các đích
tham chiếu hợp lệ cho các tham chiếu đó:
• Thành phần ‘a’ có thể tham chiếu tới bất kỳ nguồn tài nguyên cục bộ
hay không cục bộ nào đó.
• Thành phần ‘altGlyph’ phải tham chiếu tới thành phần ‘altGlyphDef’
hay một thành phần ‘glyph’.
• Thành phần ‘animate’ (xin vui lòng xem phần mô tả chi tiết thành
phần ‘animate’ trong đặc tả SVG của W3C).
• Thành phần ‘animateColor’ (xin vui lòng xem phần mô tả chi tiết
thành phần ‘animate’ trong đặc tả SVG của W3C).
• Thành phần ‘animateTransform’ (xin vui lòng xem phần mô tả chi tiết
thành phần ‘animate’ trong đặc tả SVG của W3C).
• Thuộc tính ‘clip-path’ phải tham chiếu tới một thành phần ‘clipPath’.
• Thuộc tính ‘cursor’ phải tham chiếu tới một nguồn tài nguyên cung
cấp một hình ảnh cho con trỏ chuột.
• Thành phần ‘felImage’ phải tham chiếu tới nguồn tài ngyên cục bộ
hay không cục bộ.
• Thuộc tính ‘fill’ tham chiêu tới một thành phần ‘linearGradient’….
• Thành phần ‘filter’ phải tham chiếu tới một thành phần ‘filter’.
• Thuộc tính ‘filter’ phải tham chiếu đến một thành phần ‘filter’.
Chương 3. Cấu trúc định dạng tập tin SVG
56
• Thành phần ‘image’ phải tham chiếu một nguồn tài nguyên cục bộ
hay không cục bộ.
• Thành phần ‘linearGradient’ phải tham chiếu tới một thành phần
‘linearGradient’ hay ‘radialGradient’.
• Thuộc tính ‘marker’, ‘marker-start’, ‘marker-mid’ và ‘marker-end’
phải tham chiếu tới một thành phần ‘marker’.
• Thuộc tính ‘mask’ phải tham chiếu tới một thành phần ‘mask’.
• Thành phần ‘pattern’ phải tham chiếu tới một thành phần
‘linearGradient’ hay thành phần ‘radialGradient’.
• Thành phần ‘script’ phải tham chiếu tới nguồn tài nguyên bên ngoài
cung cấp nội dung script.
• Thuộc tính ‘stroke’ tham chiếu tới một màu nào hay thành phần màu
nào đó như ‘linearGradient’ chẳng hạn.
• Thành phần textpath phải tham chiếu tới một thành phần ‘path’.
• Thành phần ‘tref’ có thể tham chiếu tới bất kỳ thành phần SVG nào.
• Thành phần ‘set’ sẽ được nhắc đến trong phần mô tả chi tiết thành
phần ‘animate’.
• Thành phần ‘use’ có thể tham chiếu tới bất kỳ nguồn tài nguyên cục
bộ hay không cục bộ nào.
Sau đây là các quy tắc dùng xử lý các tham chiếu URI không hợp lệ:
• Một tham chiếu URI cục bộ không hợp lệ (nghĩa là một tham chiếu
tới một nút trong tài liệu hiện tại) sẽ phát sinh một lỗi, ngoại trừ thuộc
tính xlink:href trong thành phần ‘a’ và thuộc tính cho phép dữ liệu
phòng hờ trường hợp giá trị tham chiếu URI không hợp lệ.
• Một tham chiếu vòng không hơp lệ sẽ phát sinh một lỗi.
• Khi thuộc tính externalResourcesRequired được thiết lập là ‘true’
trong thành phần đang tham chiếu hay là một trong các thành phần
cha của nó thì một tham chiều URI ngoại không được đáp lại sẽ phát
Chương 3. Cấu trúc định dạng tập tin SVG
57
sinh một lỗi (ví dụ , trường hợp một nguồn tài nguyên không thể định
vị được).
Như vậy để tránh việc tham chiếu ngoại dễ phát sinh lỗi thì bất kỳ khi nào có
thể chúng ta nên định nghĩa các thành phần được tham chiếu bên trong thành
phần ‘defs’. Cụ thể là các thành phần thường được tham chiếu như:
'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask',
'pattern', 'radialGradient' và 'symbol'. Định nghĩa các thành phần này trong thành
phần ‘defs’ làm cho nội dung SVG dễ hiểu và tăng khả năng truy xuất hơn đặt
chúng trong một tài liệu bên ngoài khác.
3.6.2 Các thuộc tính tham chiếu URI: Tham chiếu URI sẽ được chỉ định trong thuộc tính ‘href’ trong không gian
tên XLINK. Nếu tiền tố mặc định ‘xlink:’ được dùng cho các thuộc tính trong
không gian tên XLink thì thuộc tính đó phải được chỉ định là xlink:href. Giá trị
của thuộc tính này là một tham chiếu URI đến một nguồn tài nguyên (phân đoạn
tài nguyên) mong muốn. Nhưng để thỏa không gian tên trong XML thì cần khai
báo không gian tên XLink rõ ràng khi dùng các thuộc tính XLink trong nội dung
SVG. Cách đơn giản nhất để khai báo không gian tên XLink là dùng thuộc tính
xmlns trong thành phần ‘svg’ ngoài cùng của nội dung bên trong dùng thuộc
tính Xlink.
Ví dụ: <svg xmlns:xlink="http://www.w3.org/1999/xlink"...> <image xlink:href="foo.png" .../> </svg>
Ngoài thuộc tính xlink:href còn có các thuộc tính XLink khác có thể được
chỉ định để cung cấp thông tin bổ sung về nguồn tài nguyên được tham chiếu,
nhưng không được trình bày ở đây.
Chương 3. Cấu trúc định dạng tập tin SVG
58
3.6.3 Thành phần ‘defs’ Thành phần ‘defs’ là một thành phần vật chứa các thành phần được tham
chiếu. Người ta khuyên nên định nghĩa các thành phần được tham chiếu bên
trong thành phần ‘defs’ để dễ hiểu bất kỳ khi nào nếu có thể.
Mô hình nội dung của thành phần ‘defs’ tương tự của thành phần ‘g’. Do đó
thành phần ‘g’ chứa được thành phần nào (là con của thành phần ‘g’ này) thì
thành phần ‘defs’ có thể chứa những thành phần đó và ngược lại.
Các thành phần con của ‘defs’ không được trực tiếp hiển thị; chúng không
tham gia vào cây hiển thị. Như vậy thành phần ‘def’ chính là thành phần ‘g’ với
thuộc tính ‘display’ được thiết lập là ‘none’. Tuy các thành phần con của ‘defs’
không tham gia vào cây trình diễn nhưng nó luôn có mặt trong cây nguồn. Do đó
các thành phần khác có thể tham chiếu tới nó. Đồng thời giá trị thuộc tính
‘display’ của thành phần ‘defs’ hay bất kỳ thuộc tính nào của thành phần con
đều không ảnh hưởng tới việc một thành phần khác tham chiếu tới nó.
Ví dụ: <?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="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg"> <desc>Local URI references within ancestor's 'defs' element.</desc> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" /> <!-- Show outline of canvas using 'rect' element --> <rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
59
Kết quả trên trình duyệt sẽ là:
Hình 3.3 Minh họa thành phần ‘defs’
Trong tài liệu trên, một thành phần linearGradient được định nghĩa trong
thành phần ‘defs’ là con của thành phần ‘svg’, và là cha của thành phần ‘rect’
tham chiếu tới thành phần linearGradient.
Như vậy các thành phần tham chiếu được đặt trong thành ‘defs’ nhưng như
thế nào để dễ hiểu nhất ? Tốt nhất là đặt các thành phần được tham chiếu trong
thành phần ‘defs’ là con trực tiếp của một trong số các thành phần cha của thành
phần tham chiếu tới nó. Và ví dụ trên được xây dựng trên nguyên tắc này.
Hình sau minh họa cho ví dụ trên:
Hình 3.4. Cây DOM của nội dung SVG cho ví dụ hình chữ nhật tô tuyến tính
3.7 Thành phần ‘desc’ và ‘title’:
Mỗi thành phần vật chứa hay thành phần đồ họa trong SVG có thể cung cấp
một chuỗi mô tả bằng thành phần ‘desc’ hay ‘title’. Khi phân đoạn tài liệu SVG
…
svg
defs
linearGradien
rect
…
Chương 3. Cấu trúc định dạng tập tin SVG
60
hiện thời được hiển thị trên phương tiện trực quan thì các thành phần ‘desc’ và
‘title’ không được hiển thị. Tuy nhiên các tác nhân người dùng có thể hiển thị thành
phần ‘title’ dưới dạng tooltip (gợi ý) khi con trỏ di chuyển qua các thành phần đặc
biệt nào đó. Một cách trình diễn thay thế khác cho cả hình ảnh và âm thanh cũng có
thể thực hiện, và lúc đó các thành phần ‘desc’ và ‘title’ được hiển thị còn các thành
phần ‘path’ thì lại không. Điều đó thực sự có thể làm được nhờ vào một trang định
kiểu khác. Các cấu trúc sâu (deep structure) và các thành phần tham chiếu ‘use’ đôi
khi lại mong muốn người dùng khai thác các phần mô tả này.
Sau đây là một ví dụ. Tác nhân người dùng SVG không hiển thị các thành
phần ‘desc’ và’titile’ nhưng sẽ hiển thị phần nội dung còn lại của thành phần ‘g’. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <title> Company sales by region </title> <desc> This is a bar chart which shows company sales by region. </desc> <!-- Bar chart defined as vector data --> </g> </svg>
Các thành phần ‘decs’ và ‘title’ có thể chứa phần văn bản được đánh dấu theo
các không gian tên khác. Sau đây là ví dụ: <?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc xmlns:mydoc="http://example.org/mydoc"> <mydoc:title> This is an example SVG file </mydoc:title> <mydoc:para> The global description uses markup from the <mydoc:emph>
Chương 3. Cấu trúc định dạng tập tin SVG
61
Mydoc </mydoc:emph> namespace. </mydoc:para> </desc> <g> <!-- the picture goes here --> </g> </svg>
Trong ví dụ trên thành phần ‘decs’ chứa văn bản được đánh dấu với không
gian tên mydoc= “http://example.org/mydoc”. Các thành của không gian tên mydoc
được dùng là mydoc:title, para, và emph.
Khi tạo tập tin SVG , tác giả thường thêm một thành phần con ‘title’ vào thành
phần ‘svg’ ngoài cùng của tài liệu SVG độc lập. Thành phần con ‘title’ của thành
phần ‘svg’ được thêm vào nhằm mục đích mô tả nội dung của phân đoạn SVG được
cho. Vì người dùng thường tham khảo tài liệu ngoài ngữ cảnh nên tác giả cần cung
cấp các mô tả giàu ngữ cảnh cho tài liệu trong phần mô tả này. Để đảm bảo khả
năng truy cập, các tác nhân người dùng thường chỉ cho phép thành phần con ‘title’
của thành phần ‘svg’ ngoài cùng có giá trị với người dùng. Cơ chế này được thực
hiện tùy thuộc vào tác nhân người dùng (chẳng hạn như chú thích hay là nói lên cho
người dùng nghe).
Hiện tại các thành phần của SVG, cụ thể là thành phần vật chứa và thành phần
văn bản, không đưa ra các giới hạn về số lượng các thành phần con ‘desc’ và ‘title’.
Tính linh động này chỉ có trong thời điểm hiện nay (7/2005). Trong tương lai sẽ có
một mô hình nội dung phù hợp cho các thành phần vật chứa, bởi vì một số thành
phần vật chứa trong SVG cho phép các nội dung đan xen nhau, và các quy tắc về
nội dung đan xen với XML không yêu cầu giới hạn. Trong các phiên bản tới của
ngôn ngữ SVG, các quy tắc giới hạn nội dung đan xen sẽ được đưa ra. Người ta
khuyên tốt nhất nên có tối đa một thành phần ‘title’ và một thành phần ‘desc’ xuất
hiện trong thành phần con của thành phần đặc biệt nào đó. Những thành phần này
nên xuất hiện trước các thành phần con khác (có thể ngoại trừ thành phần
Chương 3. Cấu trúc định dạng tập tin SVG
62
‘metadata’) hay nội dung dữ liệu. Nếu các tác nhân người dùng cần thiết chọn giữa
nhiều thành phần ‘desc’ và ‘title’ trong việc xử lý (ví dụ, chọn ra một chuỗi dùng
làm tooltip), tác nhân người dùng sẽ chọn thành phần đầu tiên.
3.8 Thành phần ‘symbol’:
Thành phần ‘symbol’ (biểu tượng) được dùng để định nghĩa các đối tượng
mẫu có thể được sử dụng bởi thành phần ‘use’.
Chúng ta sử dụng thành phần ‘symbol’ cho các đồ hoạ được dùng nhiều lần
trong cùng một tài liệu sẽ tăng thêm tính cấu trúc và ngữ nghĩa cho tài liệu. Các tài
liệu giàu cấu trúc sẽ làm tăng khả năng truy cập.
Các điểm khác nhau cơ bản giữa thành phần ‘symbol’ và ‘g’:
• Một thành phần ‘symbol’ bản thân nó không được hiển thị. Chỉ có thể
hiện của nó (một tham chiếu tới thành phần ‘symbol’ bởi thành phần
‘use’) được hiển thị.
• Thành phần ‘symbol’ có thuộc tính viewBox và preserveAspectRatio
cho phép ‘symbol’ nằm vừa trong khung nhìn hình chữ nhật được định
rõ bởi thành phần ‘use’ đang tham chiếu tới nó.
Các thành phần cùng họ với ‘symbol’ là ‘marker’ và ‘pattern’.
Thành phần ‘symbol’ không bao giờ được hiển thị trực tiếp, chúng chỉ được
tham chiếu bởi thành phần ‘use’. Thuộc tính ‘display’ không được dùng cho thành
phần ‘symbol’. Vì thế các thành phần ‘symbol’ sẽ không được trực tiếp hiển thị
thậm chí thuộc tính ‘display’ được thiết lập một giá trị khác ‘none’. Các thành phần
‘symbol’ luôn ở trạng thái sẵn sàng cho tham chiếu thậm chí khi thuộc tính
‘display’ của thành phần đó hay bất kỳ thành phần cha của nó được thiết lập là
‘none’.
3.9 Thành phần ‘use’:
Bất kỳ thành phần nào trong nội dung SVG như ‘svg’, ‘symbol’, ‘g’, thành
phần đồ hoạ hay thành phần ‘use’ khác mà có thể là thành phần mẫu đều có thể
Chương 3. Cấu trúc định dạng tập tin SVG
63
được dùng lại trong tài liệu SVG bằng thành phần ‘use’ (sử dụng). Thành phần
‘use’ tham chiếu đến thành phần khác và xác định nội dung đồ hoạ được chứa vẽ tại
vị trí được cấp trong tài liệu này.
Không giống thành phần ‘image’, thành phần ‘use’ không thể tham chiếu đến
trọn vẹn một tập tin.
Thành phần ‘use’ có các thuộc tính tuỳ chọn ‘x’, ‘y’, ‘width’ và ‘height’ dùng
để ánh xạ nội dung đồ hoạ của thành phần được tham chiếu lên một phạm vi hình
chữ nhật theo hệ trục toạ độ hiện thời.
Kết quả khi dùng thành phần ‘use’ là: nội dung của thành phần được tham
chiếu như thể được nhân bản vào trong một cây DOM độc lập không hiện hữu mà
cây này có thành phần ‘use’ là cha của các thành phần được tham chiếu; còn cha
của thành phần ‘use’ là cha cấp cao hơn của chúng. Bởi vì cây DOM độc lập không
hiện hữu nên mô hình đối tượng tài liệu SVG (SVG DOM) chỉ chứa thành phần
‘use’ và thuộc tính của nó. SVG DOM không chỉ rõ các thành phần được tham
chiếu là con của thành phần ‘use’.
Đối với các tác nhân người dùng hỗ trợ định kiểu với trang định kiểu CSS, thì
việc nhân bản các thành phần được tham chiếu vào một cây DOM không có thực
cũng sao chép các giá trị thuộc tính nhận được từ CSS trên thành phần được tham
chiếu và nội dung của nó.
Tuy nhiên sự kế thừa thuộc tính diễn ra như thể thành phần được tham chiếu
được chứa nguyên bản là thành phần con của thành phần ‘use’. Thành phần được
tham chiếu thừa hưởng tất cả các thuộc tính từ thành phần ‘use’ và các thành phần
cha của thành phần ‘use’. Một thể hiện của thành phần được tham chiếu không thừa
hưởng các thuộc tính từ thành phần cha của thành phần được tham chiếu.
Nếu thuộc tính sự kiện được gắn cho thành phần được tham chiếu thì đối
tượng nhận sự kiện (đích) sẽ là đối tượng SVGElementInstance (một thể hiện thành
phần SVG) trong cây thể hiện tương ứng với thành phần được tham chiếu.
Việc quản lý sự kiện trong cây tài liệu không thực sự tồn tại hoạt động như thể
thành phần được tham chiếu là thành phần con của thành phần ‘use’, ngoại trừ một
Chương 3. Cấu trúc định dạng tập tin SVG
64
điều là các sự kiện được gửi tới các đối tượng thể hiện SVGElementinstance tương
ứng với đích và các thành phần đích hiện thời trong cây con được tham chiếu. Một
sự kiện sẽ nhân lên qua các phần không thực sự cũng như thực sự hiện hữu của cây
của cây tài liệu giống như cây tài liệu bình thường: đầu tiên sự kiện sẽ đi từ thành
phần gốc (root) xuống thành phần ‘use’ và sau đó đi qua các thành phần của cây
không thực sự tồn tại trong pha bắt sự kiện. Tiếp sau đó là pha đích tại đích của của
sự kiện, sau đó đi dần lên từ cây không thực sự tồn tại đến thành phần ‘use’ và quay
về cây bình thường tới thành phần gốc trong pha phát sự kiện lên.
Một thành phần và tất cả các đối tượng thể hiện SVGELementInstance tương
ứng dùng chung một danh sách lắng nghe sự kiện.Thuộc tính currentTarget (đích
hiện tại) của sự kiện có thể được dùng để xác định đối tượng lắng nghe sự kiện nào
được triệu gọi.
Ứng xử của thuộc tính ‘visibility’ thỏa mô hình thừa hưởng thuộc tính. Do đó
khi chỉ định ‘visibility:hidden’ trong thành phần ‘use’ không đảm bảo rằng nội dung
được tham chiếu không được hiển thị. Nếu dùng thành phần ‘use’ chỉ định
‘visibility:hidden’ tham chiếu đến thành phần chỉ định ‘visibility:hiddden’ hay
‘visibility:inherit’ thì thành phần này sẽ bị ẩn đi. Tuy nhiên, nếu thành phần được
tham chiếu chỉ định ‘visibility:visible’ thì thành phần đó sẽ hiển thị dù thành phần
‘use’ chỉ định là ‘visibility:hidden’.
Nếu thành phần được tham chiếu là ảnh động thì thể hiện của nó cũng là ảnh
động.
Một thành phần ‘use’ có cùng kết quả hiển thị như thể nó được thay thể bởi
nội dung được phát sinh:
• Nếu thành phần ‘use’ tham chiếu tới một thành phần ‘symbol’:
Trong nội dung được phát sinh, thành phần ‘use’ sẽ được thay thế bởi
thành phần ‘g’, tất cả các thuộc tính của ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’,
‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép
biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính
‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi
Chương 3. Cấu trúc định dạng tập tin SVG
65
trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần
‘symbol’ được tham chiếu và nội dung của nó được nhân bản lên và đưa
vào cây được phát sinh, với một ngoại lệ là thành phần ‘symbol’ được thay
thế bằng một thành phần ‘svg’. Thành phần ‘svg’ được phát sinh này sẽ có
các giá trị thuộc tính rõ ràng ‘width’ và ‘height’. Nếu thuộc tính ‘width’
và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các thuộc tính
này sẽ được chuyển vào thành phần ‘svg’ đựơc phát sinh. Nếu thuộc tính
‘width’ và/hoặc ‘height’ không được chỉ định thì thành phần ‘svg’ được
phát sinh sẽ dùng giá trị “100%” cho những thuộc tính này.
• Nếu thành phần ‘use’ tham chiếu tới thành phần ‘svg’:
Trong nội dung phát sinh, thành phần ‘use’ sẽ được thay thế bằng thành
phần ‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’,
‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’.
Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của
thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của
phép biến đổi trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’.
Thành phần ‘svg’ được tham chiếu và nội dung của nó được nhân bản vào
cây được phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp
trong thành phần ‘use’, thì các giá trị này sẽ đè (override) lên các thuộc
tính tương ứng của thành phần ‘svg’ trong cây phát sinh.
• Những trường hợp khác:
Trong nội dung phát sinh, thành phần ‘use’ được thay thế bằng thành phần
‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’,
‘width’, ‘height’ và ‘xlink:ref’ được chuyển vào thành phần ‘g’ được phát
sinh. Một phép biến đổi tịnh tiến translate(x,y) được thêm vào cuối của
thuộc tính ‘transform’ trong thành phần ‘g’ được phát sinh, với x và y nhận
giá trị của thuôc tính ‘x’ và ‘y’ trong thành phần ‘use’. Đối tượng được
tham chiếu và nội dung của nó được nhân bản vào cây phát sinh.
Chương 3. Cấu trúc định dạng tập tin SVG
66
Đối với các tác nhân người dùng hỗ trợ định kiểu bằng trang định kiểu CSS,
thành phần ‘g’ được phát sinh sẽ mang giá trị thuộc tính ‘cascaded’ (được xếp tầng)
của thành phần ‘use’ có được từ trang định kiểu phân tầng CSS. Hơn thế nữa, nhân
bản của nguồn tài nguyên được tham chiếu mang trong nó giá trị thuộc tính
“cascaded” nhận về từ trang định kiểu phân tầng CSS trong thành phần được tham
chiếu. Do đó, kết quả của các bộ chọn lọc CSS khi kết hợp với các thuộc tính ‘class’
và ‘style’ đựơc thay thế bằng các giá trị tương đương chức năng của thuộc tính
‘style’ trong nội dung phát sinh chuyển tải giá trị thuộc tính “cascaded”.
Ví dụ 1: Sau đây là ví dụ đơn giản dung hai thành phần ‘use’ và ‘rect’: <?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="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="20" y="10" xlink:href="#MyRect" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
67
Cây tài liệu của ví dụ này:
Hình 3.5. Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’
Kết quả trên trình duyệt sẽ là.
Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’
Nội dung của tài liệu phát sinh: <?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="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc> <!-- 'defs' section left out --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- Start of generated content. Replaces 'use' --> <g transform="translate(20,10)"> <rect width="60" height="10"/> </g> <!-- End of generated content --> </svg>
Ví dụ 2: Ví dụ sau dùng hai thành phần ‘use’ và ‘symbol’:
svg
defs
use
rect
svg
defs
g
rect
rect
Cây tài liệu ban đầu Cây tài liệu của nội dung phát sinh
Chương 3. Cấu trúc định dạng tập tin SVG
68
<?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="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use02 - 'use' on a 'symbol'</desc> <defs> <symbol id="MySymbol" viewBox="0 0 20 20"> <desc>MySymbol - four rectangles in a grid</desc> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </symbol> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" /> </svg>
Cây tài lại của ví dụ này là:
Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’
svg
defs
rect
use
symbol
rect …
svg
defs
rect
g
symbol
Rect
svg
rect …
Cây tài liệu ban đầu Cây tài liệu phát sinh
Chương 3. Cấu trúc định dạng tập tin SVG
69
Kết quả trên trình duyệt:
Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’
Nội dung tài liệu phát sinh: <?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="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc> <!-- 'defs' section left out --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- Start of generated content. Replaces 'use' --> <g transform="translate(45, 10)" > <!-- Start of referenced 'symbol'. 'symbol' replaced by 'svg', with x,y,width,height=0,0,100%,100% --> <svg width="10" height="10" viewBox="0 0 20 20"> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </svg> <!-- End of referenced symbol --> </g> <!-- End of generated content --> </svg>
Ví dụ 3: Sau đây là đoạn tài liệu SVG chứng minh cách sử dụng thành phần
‘use’ với thuộc tính ‘transform’: <?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="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
Chương 3. Cấu trúc định dạng tập tin SVG
70
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use03 - 'use' with a 'transform' attribute</desc> <defs> <rect id="MyRect" x="0" y="0" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)" /> </svg>
Kết quả trên trình duyệt là:
Hình 3.9. Minh họa thành phần ‘use’ với thuộc tính ‘transform’
Nội dung tài liệu phát sinh 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="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use03-GeneratedContent - 'use' with a 'transform' attribute</desc> <!-- 'defs' section left out --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- Start of generated content. Replaces 'use' --> <g transform="translate(20,2.5) rotate(10)"> <rect x="0" y="0" width="60" height="10"/> </g> <!-- End of generated content --> </svg>
Ví dụ 4: Đoạn tài liệu SVG sau sử dụng thành phần ‘use’ với trang định kiểu
phân tầng CSS. <?xml version="1.0" standalone="no"?>
Chương 3. Cấu trúc định dạng tập tin SVG
71
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use04 - 'use' with CSS styling</desc> <defs style=" /* rule 9 */ stroke-miterlimit: 10" > <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250" class="MyPathClass" style=" /* rule 10 */ stroke-dasharray:300,100" /> </defs> <style type="text/css"> <![CDATA[ /* rule 1 */ #MyUse { fill: blue } /* rule 2 */ #MyPath { stroke: red } /* rule 3 */ use { fill-opacity: .5 } /* rule 4 */ path { stroke-opacity: .5 } /* rule 5 */ .MyUseClass { stroke-linecap: round } /* rule 6 */ .MyPathClass { stroke-linejoin: bevel } /* rule 7 */ use > path { shape-rendering: optimizeQuality } /* rule 8 */ g > path { visibility: hidden } ]]> </style> <rect x="0" y="0" width="1200" height="300" style="fill:none; stroke:blue; stroke-width:3"/> <g style=" /* rule 11 */ stroke-width:40"> <use id="MyUse" xlink:href="#MyPath" class="MyUseClass" style="/* rule 12 */ stroke-dashoffset:50" /> </g> </svg>
Kết qủa trên trình duyệt là:
Hình 3.10 Minh họa thành phần ‘use’ với trang định kiểu CSS
Đoạn tài liệu phát sinh tương ứng như sau: <?xml version="1.0" standalone="no"?>
Chương 3. Cấu trúc định dạng tập tin SVG
72
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3cm" viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use04-GeneratedContent - 'use' with a 'transform' attribute</desc> <!-- 'style' and 'defs' sections left out --> <rect x="0" y="0" width="1200" height="300" style="fill:none; stroke:blue; stroke-width:3"/> <g style="/* rule 11 */ stroke-width:40"> <!-- Start of generated content. Replaces 'use' --> <g style="/* rule 1 */ fill:blue; /* rule 3 */ fill-opacity:.5; /* rule 5 */ stroke-linecap:round; /* rule 12 */ stroke-dashoffset:50" > <path d="M300 50 L900 50 L900 250 L300 250" style="/* rule 2 */ stroke:red; /* rule 4 */ stroke-opacity:.5; /* rule 6 */ stroke-linejoin: bevel; /* rule 10 */ stroke-dasharray:300,100" /> </g> <!-- End of generated content --> </g> </svg>
Trong đoạn tài liệu trên có sử dụng một số quy tắc định kiểu áp dụng cho nội
dung được phát sinh(các quy tắc từ 1-6 và 10-12), các nguyên tắc còn lại không
được dùng (các quy tắc từ 7-9).
• Quy tắc 7 và 8: Bộ chọn lọc định kiểu CSS chỉ áp dụng được trong cây
tài liệu bình thường mà không áp dụng được cho cây tài liệu phát sinh,
do đó hai bộ chọn lọc định kiểu (trong quy tắc 7 và 8 ) không được phát
sinh trong cây tài liệu phát sinh.
• Quy tắc 9: Cây tài liệu phát sinh chỉ thừa hưởng từ cha của thành phần
‘use’ mà không thừa hưởng các thuộc tính của cha của thành phần tham
chiếu, do đó quy tắc này không ảnh hưởng đến kết quả tài liệu phát
sinh.
Chương 3. Cấu trúc định dạng tập tin SVG
73
Trong đoạn tài liệu được phát sinh ở trên, các thuộc tính định kiểu được bộ
chọn lọc tìm thấy được chuyển thành thuộc tính nội tuyến ‘style’của thành phần ‘g’
và ‘path’.
Khi thành ‘use’ tham chiếu tới thành phần khác là ‘use’ hay nội dung của nó
chứa một thành phần ‘use’, thì hướng tiếp cận nhân bản (sao ra một thành phần
giống với thành phần được tham chiếu) ở trên sẽ lặp lại với các thành phần ‘use’ bắt
gặp trong thành phần được tham chiếu. Tuy nhiên các thành phần không được trực
tiếp hay trực tiếp tham chiếu tới thành phần tham chiếu chính tới mình, nếu không
sẽ tạo ra lỗi lặp vô hạn.
Một số thuộc tính của thành phần ‘use’:
x= “<coordinate>”
Hoành độ một góc của phạm vi hình chữ nhật mà các thành phần
được tham chiếu hiển thị trong đó.
y= “<coordinate>”
Tung độ một góc của phạm vi hình chữ nhật mà thành phần được
tham chiếu hiển thị trong đó.
width = “<length>”
Độ lớn chiều ngang của phạm vi hình chữ nhật mà các thành phần
được tham chiếu hiển thị trong đó. Giá trị âm sẽ gây ra lỗi, còn nếu
nhận giá trị 0 thì không hiển thị thành phần này.
height= “<length>”
Độ lớn chiều dọc của phạm vi hình chữ nhật mà các thành phần được
tham chiếu hiển thị trong đó. Giá trị âm sẽ gây ra lỗi, còn nếu nhận
giá trị 0 sẽ không hiển thị thành phần này.
xlink:href= “<uri>”
Là một tham chiếu tới một phân đoạn hay một thành phần khác trong
tài liệu SVG.
Chương 3. Cấu trúc định dạng tập tin SVG
74
3.10 Thành phần ‘image’:
Thành phần ‘image’ (hình ảnh) xác định nội dung của một tập tin (hình ảnh) sẽ
được hiển thị trong phạm vi hình chữ nhật được cho trong hệ trục tọa độ người dùng
hiện tại. Thành phần ‘image’ có thể tham chiếu tới một tập tin ảnh quét như PNG
hay JPEG hay một tập tin có loại MIME là “image/svg+xml” (là một tập tin SVG).
Các bộ hiển thị SVG (SVG Viewer - chương trình để hiển thị nội dung tập tin SVG)
cần phải hỗ trợ ít nhất các định dạng tập tin ảnh PNG, JPEG và SVG.
Kết quả khi xử lý thành phần ‘image’ luôn cho một ảnh với bốn kênh màu
RGBA (Red-Green-Blue-Alpha). Khi thành phần ‘image’ tham chiếu tới một ảnh
quét PNG hay JPEG có ba kênh màu thì kết quả nhận được như là một ảnh với bốn
kênh màu RGBA, trong đó kênh alpha (trong suốt) thiết lập giá trị 1 (không có độ
trong suốt với nền). Đối với ảnh quét một kênh màu thì kết quả được cũng như một
ảnh bốn kênh màu, trong trường hợp này kênh màu duy nhất được dùng để tính ba
kênh màu còn lại với kênh alpha được thiết lập giá trị là 1.
Thành phần ‘image’ thiết lập một khung nhìn mới cho tập tin được tham chiếu.
Đường bao của khung nhìn được chỉ rõ bởi thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’.
Cách hiển thị và tỉ lệ co dãn của ảnh được tham chiếu được kiểm soát bởi thuộc tính
‘preserveAspectRatio’ (bảo toàn tỉ lệ cạnh của ảnh).
Khi một thành phần ‘image’ tham chiếu tới một ảnh SVG thì thuộc tính
‘preserveAspectRatio’ cũng như thuộc tính xén (clip) và tràn (overflow) của thành
phần gốc trong ảnh SVG được tham chiếu sẽ bị bỏ qua. Thay vào đó thuộc tính
‘preserveAspectRatio’ của thành phần ‘image’ đang tham chiếu sẽ định nghĩa cách
thức nội dung ảnh SVG được hiển thị trong khung nhìn và các thuộc tính xén và
tràn của thành phần ‘image’ sẽ định nghĩa cách thức nội dung ảnh SVG được xén
theo hệ trục toạ độ của khung nhìn.
Giá trị của thuộc tính ‘viewBox’ được dùng với thuộc tính
‘preserveAspectRatio’ thì được định nghĩa trong nội dung ảnh được tham chiếu.
Đối với nội dung được tham chiếu có chỉ định một ‘viewBox’ (ví dụ, một tập tin
SVG chứa thuộc tính ‘viewBox’ trong thành phần SVG ngoài cùng) thì giá trị
Chương 3. Cấu trúc định dạng tập tin SVG
75
‘viewBox’ này sẽ được dùng. Đối với ảnh quét (PNG, JPEG) thì đường bao của ảnh
sẽ được dùng như ‘viewBox’ có giá trị là “0 0 [chiều rộng ảnh] [chiều cao ảnh]”.
Nếu nội dung được tham chiếu không có giá trị tương ứng với ‘viewBox’ (tập tin
SVG không có ‘viewBox’) thì thuộc tính ‘preserveAspectRatio’ sẽ bị bỏ qua, và nội
dung ảnh tham chiếu chỉ tịnh tiến một đoạn tương ứng với giá trị thuộc tính ‘x’ và
‘y’.
Ví dụ, nếu ảnh được tham chiếu là PNG hay JPEG và thuộc tính
preserveAspectRatio = “xMinYmin meet”, thì tỉ lệ cạnh của ảnh quét sẽ bảo toàn,
ảnh quét sẽ được định kích thước lớn nhất có thể mà vẫn đảm bảo toàn bộ ảnh quét
được hiển thị trong khung nhìn mà thành phần ‘image’ thiết lập. Góc trái trên của
ảnh quét được canh thẳng với góc trái trên của khung nhìn được định nghĩa bởi các
thuộc tính ‘x’, ‘y’, ‘width’, ‘heigth’ trong thành phần ‘image’ đang tham chiếu tới
ảnh đó. Nếu thuộc tính preserveAspectRatio= ‘none’ thì tỉ lệ cạnh của ảnh không
được bảo toàn. Khi đó ảnh sẽ co vừa khít trong khung nhìn, góc trái của ảnh trùng
với góc trái của khung nhìn và góc dưới phải của ảnh trùng với góc dưới phải của
khung nhìn (x+width , y+height).
Nguồn tài nguyên được tham chiếu bởi thành phần ‘image’ sẽ cung cấp một tài
liệu riêng. Tài liệu riêng này sẽ phát sinh cây phân tích riêng và mô hình đối tượng
tài liệu riêng (nếu nguồn tài nguyên là một tập tin XML). Do đó không có sự kế
thừa thuộc tính vào trong ảnh.
Không giống với thành phần ‘use’, thành phần ‘image’ không thể tham chiếu
đến các thành phần trong tập tin SVG.
Các thuộc tính thường sử dụng của thành phần ‘image’:
x= “<coordinate>”
Toạ độ x góc trái trên của phạm vi hình chữ nhật sẽ chứa hình ảnh
được tham chiếu.
Giá trị mặc định là “0”.
y= “<coordinate>”
Chương 3. Cấu trúc định dạng tập tin SVG
76
Toạ độ y góc trái trên của phạm vi hình chữ nhật sẽ chứa hình ảnh
được tham chiếu.
Giá trị mặc định là “0”.
width= “<length>”
Số đo chiều ngang của phạm vi hình chữ nhật sẽ chứa hình ảnh được
tham chiếu.
Không nhận giá trị âm, nếu thiết lập giá trị âm sẽ gây ra lỗi. Nếu bằng
0 thì không hiển thị thành phần này.
height= “<length>”
Số đo chiều dọc của phạm vi hình chữ nhật sẽ chứa hình ảnh được
tham chiếu.
Không nhận giá trị âm, nếu thiết lập giá trị âm sẽ gây ra lỗi. Nếu bằng
0 thì không hiển thị thành phần này.
xlink:href= “<uri>”
Tham chiếu URI tới nguồn tài nguyên hình ảnh.
preserveAspectRatio= “none” hoặc “xMinYMin” hoặc ….
Thiết lập các giá trị thích hợp để ảnh co dãn hiển thị như mong muốn.
Ví dụ 1: Sau đây là ví dụ đơn giản sử dụng thành phần “image” tham chiếu tới
một ảnh PNG. <?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="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>This graphic links to an external image </desc> <rect x="10" y="10" width="100px" height="100px" fill="none" stroke="blue" stroke-width=".02" /> <image x="10" y="10" width="100px" height="100px" preserveAspectRatio="xMinYMin" xlink:href="a.png"> <title>My image</title> </image> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
77
3.11 Các hình cơ bản
3.11.1 Hình chữ nhật – thành phần ‘rect’ Thành phần hình chữ nhật định nghĩa một hình chữ nhật với hệ trục toạ độ
người dùng hiện thời. Để định nghĩa hình chữ nhật tròn góc thì ta thiết lập thuộc
tính ‘rx’ và ‘ry’ trong thành phần ‘rect’.
Một số thuộc tính thường dùng của thành phần ‘rect’:
x= “<coordinate>”
Toạ độ x góc trái trên của hình chữ nhật, giá trị mặc định là “0”
y= “<coordinate>”
Toạ độ y góc trái trên của hình chữ nhật, giá trị mặc định là “0”
width= “<length>”
Độ lớn chiều ngang của hình chữ nhật, giá trị âm sẽ gây ra lỗi.
Nếu nhận giá trị “0” thì sẽ không hiển thị thành phần này.
height= “<length>”
Độ lớn chiều dọc của hình chữ nhật, giá trị âm sẽ gây ra lỗi.
Nếu nhận giá trị “0” thì sẽ không hiển thị thành phần này.
rx = “<length>”
Dành cho hình chữ nhật tròn góc, bán kính trục x của e-lip dùng làm
tròn góc hình chữ nhật
ry = “<length>”
Dành cho hình chữ nhật tròn góc, bán kính trục y của e-lip dùng làm
tròn góc hình chữ nhật
Ví dụ 1: Hình chữ nhật nhọn góc <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example rect01 - rectangle with sharp
Chương 3. Cấu trúc định dạng tập tin SVG
78
corners</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" /> </svg>
Kết quả trên trình duyệt:
Hình 3.11. Minh họa thành phần ‘rect’ vuông góc
Ví dụ 2: Hình chữ nhật tròn góc <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example rect02 - rounded rectangles</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <rect x="100" y="100" width="400" height="200" rx="50" fill="green" /> <g transform="translate(700 210) rotate(-30)"> <rect x="0" y="0" width="400" height="200" rx="50" fill="none" stroke="purple" stroke-width="30" /> </g> </svg>
Kết quả trên trình duyệt:
Hình 3.12. Minh họa thành phần ‘rect’ tròn góc
Chương 3. Cấu trúc định dạng tập tin SVG
79
3.11.2 Hình tròn – thành phần ‘circle’ Thành phần ‘circle’ định nghĩa một hình tròn dựa vào tâm và bán kính.
Một số thuộc tính của thành phần ‘circle’:
cx= “<coordinate>”
Toạ độ x của tâm đường tròn. Mặc định là “0”
cy= “<coordinate>”
Toạ độ y của tâm đường tròn. Mặc định là “0”
r= “<length>”
Bán kính của đường tròn. Giá trị âm sẽ gây ra lỗi. Nếu là “0” thì
không hiển thị thành phần này.
Ví dụ 1: Hình tròn viền xanh, bên trong màu đỏ <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example circle01 - circle filled with red and stroked with blue</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2"/> <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" /> </svg>
Kết quả trên trình duyệt:
3.11.3 Hình e-lip – thành phần ‘ellipse’ Thành phần ‘ellipse’ định nghĩa một hình e-lip trong hệ trục tọa độ người
dùng hiện tại dựa trên tâm và hai bán kính.
Hình 3.13. Minh họa thành phần ‘circle’
Chương 3. Cấu trúc định dạng tập tin SVG
80
Một số thuộc tính của thành phần ‘ellipse’:
cx = “<coordinate>”
Toạ độ x của tâm e-lip. Mặc định là “0”
cy = “<coordinate>”
Toạ độ y của tâm e-lip. Mặc định là “0”
rx = “<length>”
Bán kính trục x của e-lip. Không nhận giá trị âm. Giá trị âm sẽ gây ra
lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị.
ry = “<length>”
Bán kích trục y của e-lip.. Không nhận giá trị âm. Giá trị âm sẽ gây ra
lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị.
Ví dụ 1:
Ví dụ sau xây dựng hai hình e-lip trong hệ trục toạ độ người dùng được
thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’ và thuộc tính
‘transform’ trong thành phần ‘g’ và ‘ellipse’. Cả hai e-lip dùng giá trị mặc định
cho thuộc tính ‘cx’ và ‘cy’ (tâm của e-lip). Hình e-lip thứ hai được quay lệch
một góc. <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example ellipse01 - examples of ellipses</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
81
Kết quả trên trình duyệt:
Hình 3.14. Minh họa thành phần ‘ellipse’
3.11.4 Đường thẳng – thành phần ‘line’ Thành phần ‘line’ định nghĩa một đoạn thẳng bắt đầu tại một điểm và kết
thúc tại một điểm khác.
Một số thuộc tính của thành phần ‘line’
x1= “<coordinate>”
Toạ độ x của điểm đầu. Mặc định là “0”
y1= “<coordinate>”
Toạ độ y của điểm đầu. Mặc định là “0”
x2= “<coordinate>”
Toạ độ x của điểm cuối. Mặc định là “0”
y2= “<coordinate>”
Toạ độ y của điểm cuối. Mặc định là “
Ví dụ 1: Ví dụ sau xây dựng năm đoạn thẳng trong hệ trục toạ độ người
dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. Các đoạn
thẳng có độ dày khác nhau. <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example line01 - lines expressed in user coordinates</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green" >
Chương 3. Cấu trúc định dạng tập tin SVG
82
<line x1="100" y1="300" x2="300" y2="100" stroke-width="5" /> <line x1="300" y1="300" x2="500" y2="100" stroke-width="10" /> <line x1="500" y1="300" x2="700" y2="100" stroke-width="15" /> <line x1="700" y1="300" x2="900" y2="100" stroke-width="20" /> <line x1="900" y1="300" x2="1100" y2="100" stroke-width="25" /> </g> </svg>
Kết qủa trên trình duyệt:
Hình 3.15. Minh họa thành phần ‘line’
3.11.5 Đường gấp khúc – thành phần ‘polylinbe’ Thành phần ‘polyline’ định nghĩa một tập các đoạn thẳng nối trực tiếp với
nhau. Thành phần ‘polyline’ định nghĩa một hình mở.
Một số thuộc tính của thành phần ‘polyline’:
points= “<list-of-points>”
Mảng các điểm tạo nên đường gấp khúc. Giá trị các toạ độ tính theo hệ trục
toạ độ người dùng hiện tại.
Ví dụ 1: Ví dụ sau xây dựng một đường gấp khúc trong hệ trục tọa độ
người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polyline01 - increasingly larger bars</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398"
Chương 3. Cấu trúc định dạng tập tin SVG
83
fill="none" stroke="blue" stroke-width="2" /> <polyline fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" /> </svg>
Kết quả trên trình duyệt:
Hình 3.16 Minh họa thành phần ‘polyline’
3.11.6 Đa giác – thành phần ‘polygon’ Thành phần ‘polygon’ định nghĩa một đa giác.
Một số thuộc tính của thành phần ‘polygon’:
points = “<list-of-points>”
Mảng các điểm tạo nên đa giác. Tất cả các toạ độ được tính theo hệ trục toạ
độ người dùng hiện tại.
Ví dụ 1: Ví dụ sau xây dựng hai hình đa giác (một ngôi sao và một lục
giác) trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’
trong thành phần ‘svg’. <?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="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example polygon01 - star and hexagon</desc> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215
Chương 3. Cấu trúc định dạng tập tin SVG
84
423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> </svg>
3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo
3.12.1 Giới thiệu
Đối với tất cả các phương tiện (media), phông nền SVG (SVG canvas) là
“không gian để hiển thị nội dung SVG”. Phông nền thì không giới hạn các hướng
trong không gian, nhưng nội dung SVG chỉ hiển thị trong một phạm vi hình chữ
nhật của phông nền. Phạm vi hình chữ nhật đó được gọi là khung nhìn SVG (SVG
viewport). Đối với các phương tiện trực quan (visual media), khung nhìn SVG là
phạm vi mà người dùng nhìn thấy nội dung SVG trong đó.
Kích thước của khung nhìn SVG (chiều dài, chiều rộng) được xác định bởi
một quá trình thoả thuận giữa phân đoạn tài liệu SVG và cha (có thực hay không
tường minh) của nó. Một khi quá trình thoả thuận hoàn tất, tác nhân người dùng
SVG được cung cấp các thông tin sau:
• Một con số đại diện cho chiều dài tính bằng đơn vị “điểm ảnh” (pixels)
của khung nhìn.
• Một con số đại diện cho chiều rộng tính bằng đơn vị “điểm ảnh” của
khung nhìn.
• (không bắt buộc) một giá trị số thực xác định kích thước trong thế giới
thực của một “điểm ảnh” (là bao nhiêu mm chẳng hạn).
Dùng các thông tin trên, tác nhân người dùng xác định khung nhìn, hệ trục toạ
độ khung nhìn ban đầu (viewport coordinate system) và một hệ trục toạ độ người
dùng ban đầu (user coordinate system). Cả hai hệ trục toạ độ này có cùng gốc toạ độ
trùng với gốc toạ độ của khung nhìn (đối với khung nhìn gốc thì gốc toạ độ của
Chương 3. Cấu trúc định dạng tập tin SVG
85
khung nhìn là góc trái trên). Một đơn vị toạ độ trong hệ trục toạ độ ban đầu bằng
một “điểm ảnh” trong khung nhìn. Hệ trục toạ độ khung nhìn còn được gọi là không
gian khung nhìn (viewport space) và hệ trục toạ độ người dùng còn được gọi là
không gian người sử dụng (user space).
Giá trị chiều dài trong SVG được đo như sau:
• Nếu không có đơn vị kèm theo, ví dụ “15”, thì tính theo giá trị đơn vị
trong hệ trục toạ độ người dùng.
• Nếu có đơn vị kèm theo, ví dụ “15m” hay “5cm”, thì tính theo hệ đo
lường.
Các đơn vị chiều dài hỗ trợ là : em, ex, px, pt, pc, cm, mm, in và %.
Một không gian người dùng (nghĩa là một hệ trục toạ độ hiện tại mới) có thể
được thiết lập tại bất kỳ nơi nào trong một phân đoạn tài liệu SVG bằng các phép
biến đổi (transformations) dưới dạng các ma trận biến đổi (transformation matrices)
hay các phép biến đổi đợn như phép quay (rotate), xiên (xskew, yskew), tỉ lệ (scale)
và tịnh tiến (translate). Thiết lập một không gian người dùng mới bằng các phép
biến đổi hệ trục toạ độ là nền tảng cho đồ họa 2D, cung cấp một phương thức thông
thường cho việc kiểm soát kích thước, vị trí, góc quay, độ xiên của các đối tượng đồ
hoạ.
Một khung nhìn mới cũng có thể được thiết lập. Bằng cách thiết lập một khung
nhìn mới, chúng ta có thể định nghĩa một phạm vi hình chữ nhật mới để các đối
tượng đồ họa hiển thị vừa khít trong nó.
3.12.2 Khung nhìn ban đầu
Tác nhân người dùng SVG thoả thuận với tác nhân người dùng cha để xác
định khung nhìn mà tác nhân người dùng SVG sẽ xây dựng nội dung SVG trong đó.
Trong một số trường hợp, nội dung SVG được nhúng trong một tài liệu khác (tài
liệu chứa). Tài liệu chứa này có các thuộc tính và các tham số dùng để chỉ định hay
Chương 3. Cấu trúc định dạng tập tin SVG
86
cung cấp các thông tin về kích thước của khung nhìn cho nội dung SVG. Nội dung
SVG, một cách tuỳ chọn, cung cấp thông tin liên quan đến khung nhìn thích hợp
cho nội dung SVG thông qua thuộc tính ‘width’ và ‘height’ trong thành phần ‘svg’
ngoài cùng. Quá trình thoả thuận sử dụng bất kỳ thông tin được cung cấp bởi tài
liệu chứa và nội dung SVG để chọn vị trí và kích thước khung nhìn cho nội dung
SVG.
Thuộc tính ‘width’ trong thành phần ‘svg’ thiết lập chiều dài của khung nhìn,
trừ các trường hợp sau:
• Nội dung SVG là một tài nguyên được lưu trữ độc lập và được nhúng
bằng tham chiếu (chẳng hạn, nhúng vào tài liệu XHTML qua thành
phần ‘object’), hoặc nội dung SVG được nhúng trong một tài liệu chứa.
• Và thành phần đang tham chiếu tới nội dung SVG hay tài liệu chứa
được định kiểu bằng trang định kiểu CSS hay XSL
• Và có các thuộc tính định vị tương thích CSS được chỉ định trong thành
phần đang tham chiếu (ví dụ thành phần ‘object’) hay trong thành phần
‘svg’ ngoài cùng của tài liệu chứa có khả năng thiết lập chiều dài của
khung nhìn.
Trong các trường hợp này, thuộc tính định vị sẽ thiết lập chiều dài của khung
nhìn.
Tương tự, nếu có các thuộc tính định vị được chỉ định trong thành phần tham
chiếu tới tập tin SVG hay trên thành phần ‘svg’ ngoài cùng tài liệu chứa có khả
năng thiết lập chiều rộng của khung nhìn, thì khi đó các thuộc tính định vị này sẽ
thiết lập chiều rộng của khung nhìn; ngược lại, thuộc tính ‘height’ trên thành phần
‘svg’ ngoài cùng của nội dung SVG sẽ thiết lập chiều rộng của khung nhìn.
Nếu thuộc tính ‘width’ hay ‘height’ trên thành phần ‘svg’ ngoài cùng đo theo
đơn vị ngừơi dùng (không có chỉ định đơn vị đo), khi đó giá trị này được tính theo
đơn vị px (pixel).
Chương 3. Cấu trúc định dạng tập tin SVG
87
Ví dụ 1:
Trong ví dụ sau, một ảnh SVG được nhúng nội tuyến trong một tài liệu XML
được định dạng theo CSS. Bởi vì các thuộc tính định vị CSS khộng được cung cấp
trong thành phần ‘svg’ ngoài cùng, nên thuộc tính width= “100px” và height =
“200px” xác định kích thước của khung nhìn ban đầu. <?xml version="1.0" standalone="yes"?> <parent xmlns="http://some.url"> <!-- SVG graphic --> <svg xmlns='http://www.w3.org/2000/svg' width="100px" height="200px" version="1.1"> <path d="M100,100 Q200,400,300,100"/> <!-- rest of SVG graphic would go here --> </svg> </parent>
3.12.3 Hệ trục toạ độ ban đầu
Đối với thành phần SVG ngoài cùng của nội dung SVG, tác nhân người dùng
SVG xác định một hệ trục tọa độ khung nhìn (viewport coordinate system) ban đầu
và một hệ trục toạ độ người dùng (user coordinate system) ban đầu. Gốc toạ độ của
hai hệ trục toạ độ này trùng với gốc toạ độ của khung nhìn, và mỗi đơn vị trong hệ
trục toạ độ ban đầu bằng 1 “điểm ảnh” (pixel). Trong hầu hết các trường hợp, tài
liệu SVG độc lập hay phân đoạn tài liệu SVG được nhúng trong một tài liệu XML
cha, thì hệ trục toạ độ khung nhìn ban đầu có gốc toạ độ nằm ở góc trái của khung
nhìn với trục x hướng từ trái sang phải, trục y từ trên xuống.
Ví dụ 1:
Ví dụ một hệ trục toạ độ ban đầu với gốc toạ độ nằm ở góc trái và trục x
hướng sang phải, trục y hướng từ trên xuống. Hệ trục toạ độ người dùng ban đầu có
mỗi đơn vị người dùng bằng một “pixel”.
Chương 3. Cấu trúc định dạng tập tin SVG
88
<?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="100px" version="1.1" <xmlns="http://www.w3.org/2000/svg"> <desc>Example InitialCoords - SVG's initial coordinate system</desc> <g fill="none" stroke="black" stroke-width="3" > <line x1="0" y1="1.5" x2="300" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="100" /> </g> <g fill="red" stroke="none" > <rect x="0" y="0" width="3" height="3" /> <rect x="297" y="0" width="3" height="3" /> <rect x="0" y="97" width="3" height="3" /> </g> <g font-size="14" font-family="Verdana" > <text x="10" y="20">(0,0)</text> <text x="240" y="20">(300,0)</text> <text x="10" y="90">(0,100)</text> </g> </svg>
Kết quả trên trình duyệt:
3.12.4 Các phép biến đổi hệ trục toạ độ
Một hệ trục toạ độ người dùng mới (nghĩa là một hệ trục toạ độ hiện hiện tại
mới – new current coordinate system ) có thể được thiết lập bằng các phép biến đổi
thông qua thuộc tính ‘transform’ của thành phần vật chứa hay thành phần đồ họa,
hay thông qua thuộc tính ‘viewBox’ của thành phần ‘svg’, ‘symbol’, ‘marker’,
‘pattern’ và thành phần ‘view’. Thuộc tính ‘transform’ và ‘viewBox’ được áp dụng
(biến đổi) cho các toạ độ và chiều dài trong hệ trục toạ độ người dùng của thành
Hình 3.17. Minh họa hệ trục tọa độ ban đầu
Chương 3. Cấu trúc định dạng tập tin SVG
89
phần chứa thuộc tính này và tất cả các thành phần con. Các phép đổi có thể lồng
nhau, lúc đó các phép biến đổi sẽ được cộng dồn lại.
Ví dụ 2:
Dưới đây là ví dụ về một tài liệu không có phép biến đổi. Chuỗi văn bản được
xác định trong hệ toạ độ ban đầu.
Kết quả trên trình duyệt:
Hình 3.18. Minh họa hiển thị không có phép biến đổi
Ví dụ 3:
Thiết lập một hệ trục toạ độ người dùng bằng phép tịnh tiến transfrom=
“translate(50,50)” trên thành phần ‘g’ thứ ba. Hệ trục toạ độ người dùng mới có gốc
<?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="400px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example OrigCoordSys - Simple transformations: original picture</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g> <g> <text x="30" y="30" font-size="20" font-family="Verdana" > ABC (orig coord system) </text> </g> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
90
toạ độ tại (50,50) trong hệ trục toạ độ nguyên thủy. Kết quả của phép biến đổi này
là một toạ độ (30,30) trong hệ trục toạ độ người dùng mới được ánh xạ thành
(80,80) trong hệ trục toạ độ nguyên thủy . Như vậy các toạ độ được tính tiến 50 đơn
vị trên trục x và 50 đơn vị trên trục y. <?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="400px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example NewCoordSys - New user coordinate system</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g> <g> <text x="30" y="30" font-size="20" font-family="Verdana" > ABC (orig coord system) </text> </g> <!-- Establish a new coordinate system, which is shifted (i.e., translated) from the initial coordinate system by 50 user units along each axis. --> <g transform="translate(50,50)"> <g fill="none" stroke="red" stroke-width="3" > <!-- Draw lines of length 50 user units along the axes of the new coordinate system --> <line x1="0" y1="0" x2="50" y2="0" stroke="red" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="30" y="30" font-size="20" font-family="Verdana" > ABC (translated coord system) </text> </g> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
91
Kết quả trên trình duyệt:
Ví dụ 4:
Dùng phép biến đổi tỉ lệ (sclale) và quay (rotate), ví dụ sau định nghĩa hai hệ
trục toạ độ người dùng mới.
• Một hệ trục là kết quả của phép tịnh tiến 50 đơn vị theo trục x và 30
đơn vị theo trục y, và phép quay 30o
• Một hệ trục là kết quả của phép tịnh tiến 200 đơn vị theo trục x và 40
đơn vị theo trục y, và phép tỉ lệ 1.5
<?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="400px" height="120px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example RotateScale - Rotate and scale transforms</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g> <!-- Establish a new coordinate system whose origin is at (50,30) in the initial coord. system and which is rotated by 30 degrees. --> <g transform="translate(50,30)"> <g transform="rotate(30)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g>
Hình 3.19. Minh họa phép tịnh tiến
Chương 3. Cấu trúc định dạng tập tin SVG
92
<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (rotate) </text> </g> </g> <!-- Establish a new coordinate system whose origin is at (200,40) in the initial coord. system and which is scaled by 1.5. --> <g transform="translate(200,40)"> <g transform="scale(1.5)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (scale) </text> </g> </g> </svg>
Kết quả trên trình duyệt:
Hình 3.20. Minh họa phép quay và phép co giãn
Ví dụ 5: Định nghĩa hai hệ trục toạ độ được biến đổi xiên tương đối với hệ trục
toạ độ nguyên thủy. <?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="400px" height="120px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example Skew - Show effects of skewX and skewY</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- Draw the axes of the original coordinate system -->
Chương 3. Cấu trúc định dạng tập tin SVG
93
<line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g> <!-- Establish a new coordinate system whose origin is at (30,30) in the initial coord. system and which is skewed in X by 30 degrees. --> <g transform="translate(30,30)"> <g transform="skewX(30)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (skewX) </text> </g> </g> <!-- Establish a new coordinate system whose origin is at (200,30) in the initial coord. system and which is skewed in Y by 30 degrees. --> <g transform="translate(200,30)"> <g transform="skewY(30)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (skewY) </text> </g> </g> </svg>
Kết quả trên trình duyệt:
Hình 3.21. Minh họa phép kéo xiên theo trục X, trục Y
Chương 3. Cấu trúc định dạng tập tin SVG
94
Ví dụ 6: Các phép biến đổi lồng nhau. <?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="400px" height="150px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example Nested - Nested transformations</desc> <g fill="none" stroke="black" stroke-width="3" > <!-- Draw the axes of the original coordinate system --> <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g> <!-- First, a translate --> <g transform="translate(50,90)"> <g fill="none" stroke="red" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="16" font-family="Verdana" > ....Translate(1) </text> <!-- Second, a rotate --> <g transform="rotate(-45)"> <g fill="none" stroke="green" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="16" font-family="Verdana" > ....Rotate(2) </text> <!-- Third, another translate --> <g transform="translate(130,160)"> <g fill="none" stroke="blue" stroke-width="3" > <line x1="0" y1="0" x2="50" y2="0" /> <line x1="0" y1="0" x2="0" y2="50" /> </g> <text x="0" y="0" font-size="16" font-family="Verdana" > ....Translate(3) </text> </g> </g> </g> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
95
Kết quả trên trình duyệt :
Hình 3.22 Minh họa phép các phép biến đổi lồng nhau
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ỏ
hình. Nếu <sy> không được cung cấp thì được gán bằng <sx>.
Chương 3. Cấu trúc định dạng tập tin SVG
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ị
độ dài của thành phần chứa thuộc tính này. Ví dụ như trong thành phần sau.
Chương 3. Cấu trúc định dạng tập tin SVG
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>
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ạ độ
người dùng mới.
Chương 3. Cấu trúc định dạng tập tin SVG
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’
ngoà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
Hình 3.23 Minh họa thuộc tính ‘viewBox’
Chương 3. Cấu trúc định dạng tập tin SVG
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) ngoài phép biến đổi tỉ lệ (sacle). Ví dụ, khi trong thành phần ‘svg’ ngoà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ạ độ
trước khi áp dụng phép biến đổi ‘viewBox’. Mặc khác, giống thuộc tính ‘transform’
Chương 3. Cấu trúc định dạng tập tin SVG
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’.
3.12.7 Thuộc tính ‘preserveAspectRatio’
Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn
các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình
(hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ).
Trong một số trường hợp khác thì lại muốn các cạnh co dãn với cùng tỉ lệ để đảm
bảo tỉ lệ cạnh của hình (hình mới đồng dạng với hình nguyên thủy).
Thuộc tính ‘preserveAspectRatio= “[defer]<align>[<meetOrSlice>]”, chỉ áp
dụng trong các thành phần thiết lập khung nhìn mới, thành phần ‘marker’, ‘pattern’,
‘view’, dùng để chỉ định có cần co dãn tỉ lệ các chiều đồng nhất hay không. Thuộc
tính ‘preserveAspectRatio’ chỉ dùng khi thuộc tính ‘viewBox’ được thiết lập, ngược
lại thuộc tính này bị bỏ qua.
Đối với thành phần ‘image’, thuộc tính ‘preserveAspectRatio’ trên thành phần
‘image’ xác định có cần bảo toàn tỉ lệ cạnh của ảnh được tham chiếu khi hiển thị
hay không.
Nếu giá trị của thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ bắt
đầu với giá trị ‘defer’ thì giá trị của thuộc ‘preserveAspectRatio’ (nếu có) trong nội
dung được tham chiếu sẽ được dùng . Nếu nội dung được tham chiếu không có giá
trị thuộc tính ‘preserveAspectRatio’ thì thuộc tính ‘preserveAspectRatio’ trên thành
phần ‘image’ sẽ được xử lý bình thường – bỏ qua giá trị ‘defer’. Đối với các thành
phần khác thành phần ‘image’ thì giá trị ‘defer’ trên thuộc tính
‘preserveAspectRatio’ sẽ bị bỏ qua.
Tham số <align> (canh lề) xác định có cần đảm bảo tỉ lệ các chiều hay không,
nếu nó thuộc tính được thiết lập thì phương thức canh lề được dùng khi tỉ lệ cạnh
trong thuộc tính ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn.
Tham số <align> phải là một trong các giá trị sau:
Chương 3. Cấu trúc định dạng tập tin SVG
101
• none – không cần bảo toàn tỉ lệ cạnh. Nếu <align> nhận giá trị ‘none’
thì tuỳ chọn <meetOrSlice> sẽ bị bỏ qua.
• xMinYMin - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMidYMin-Cần bảo toàn tỉ lệ cạnh
o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X
điểm giữa của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMaxYMin-Cần bảo toàn tỉ lệ cạnh
o Giá trị <min-x> + <width> của ‘viewBox’ canh trùng với giá trị
X lớn nhất của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMinYMid-Cần bảo toàn tỉ lệ cạnh
o Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm
giữa của khung nhìn.
• xMidYMid-Cần bảo toàn tỉ lệ cạnh
o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X
điểm giữa của khung nhìn.
Chương 3. Cấu trúc định dạng tập tin SVG
102
o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm
giữa của khung nhìn.
• xMaxYMid - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <max-x> của ‘viewBox’ canh trùng với giá trị X lớn nhất
của khung nhìn.
o Giá trị Y của điểm giữa của ‘viewBox’ canh trùng với giá trị Y
của điểm giữa của khung nhìn.
• xMinYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.
• xMidYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X
của điểm giữa của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.
• xMaxYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> + <width> của ‘viewBox’ canh trùng với giá trị
X lớn nhất của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.
Tham số <meetOrSlice> là tham số tuỳ chọn, nếu được cung cấp, nó sẽ được
tách biệt với giá trị <align> bởi một hay nhiều khoảng trắng.
Chương 3. Cấu trúc định dạng tập tin SVG
103
• meet (mặc định) :
o Bảo toàn tỉ lệ cạnh
o Toàn bộ ‘viewBox’ hiển thị trong khung nhìn
o ‘viewBox’ được dãn to hết mức có thể trong khi vẫn đảm bảo
các ràng buộc khác.
Trong trường hợp này, nếu tỉ lệ cạnh của ảnh không khớp với khung
nhìn, thì khung nhìn lớn hơn ‘viewBox’.
• slice:
o Bảo toàn tỉ lệ cạnh
o ‘viewBox’ sẽ chiếm toàn bộ khung nhìn
o ‘viewBox’ được co lại nhỏ nhất có thể, trong khi vẫn đảm bảo
các ràng buộc khác
Trong trường hợp này, nếu tỉ lệ cạnh của ‘viewBox’ không khớp với
tỉ lệ cạnh của khung nhìn thì một phần của ‘viewBox’ không hiển
thị trong khung nhìn.
Ví dụ 1:
Ví dụ sau chứng minh các tùy chọn đối với thuộc tính ‘preserveAspectRatio’. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY Smile " <rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/> <g transform='translate(0, 5)'> <circle cx='15' cy='15' r='10' fill='yellow'/> <circle cx='12' cy='12' r='1.5' fill='black'/> <circle cx='17' cy='12' r='1.5' fill='black'/> <path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-width='2'/> </g> "> <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49'
Chương 3. Cấu trúc định dạng tập tin SVG
104
height='29' fill='none' stroke='blue'/>"> <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>"> ]> <svg width="450px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc> <rect x="1" y="1" width="448" height="298" fill="none" stroke="blue"/> <g font-size="9"> <text x="10" y="30">SVG to fit</text> <g transform="translate(20,40)">&Smile;</g> <text x="10" y="110">Viewport 1</text> <g transform="translate(10,120)">&Viewport1;</g> <text x="10" y="180">Viewport 2</text> <g transform="translate(20,190)">&Viewport2;</g> <g id="meet-group-1" transform="translate(100, 60)"> <text x="0" y="-30">--------------- meet ---------------</text> <g><text y="-10">xMin*</text>&Viewport1; <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(70,0)"><text y="-10">xMid*</text>&Viewport1; <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(0,70)"><text y="-10">xMax*</text>&Viewport1; <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> </g> <g id="meet-group-2" transform="translate(250, 60)"> <text x="0" y="-30">---------- meet ----------</text> <g><text y="-10">*YMin</text>&Viewport2; <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> <g transform="translate(50, 0)"><text y="-10">*YMid</text>&Viewport2; <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"
Chương 3. Cấu trúc định dạng tập tin SVG
105
width="30" height="60">&Smile;</svg></g> <g transform="translate(100, 0)"><text y="-10">*YMax</text>&Viewport2; <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> </g> <g id="slice-group-1" transform="translate(100, 220)"> <text x="0" y="-30">---------- slice ----------</text> <g><text y="-10">xMin*</text>&Viewport2; <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> <g transform="translate(50,0)"><text y="-10">xMid*</text>&Viewport2; <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> <g transform="translate(100,0)"><text y="-10">xMax*</text>&Viewport2; <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> </g> <g id="slice-group-2" transform="translate(250, 220)"> <text x="0" y="-30">--------------- slice ---------------</text> <g><text y="-10">*YMin</text>&Viewport1; <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(70,0)"><text y="-10">*YMid</text>&Viewport1; <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(140,0)"><text y="-10">*YMax</text>&Viewport1; <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> </g> </g> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
106
Kết quả trên trình duyệt:
Hình 3.24 Minh họa thuộc tính ‘preserveAspectRatio’
3.12.8 Thiết lập khung nhìn
Tại bất kỳ điểm nào trong hình vẽ SVG, chúng ta có thể thiết lập một khung
nhìn mới cho tất cả các thành phần chứa trong nó bằng cách thêm một thành phần
‘svg’ vào nội dung SVG. Bằng cách thiết lập một khung nhìn mới, chúng ta thiết
lập một hệ trục toạ độ khung nhìn mới, một hệ trục toạ độ người dùng mới, và cũng
có thể thêm vào một đường xén mới.
Đường bao của khung nhìn mới được định nghĩa bởi thuộc tính ‘x’, ‘y’,
‘width’ và ‘height’ trong thành phần thiết lập khung nhìn mới, thành phần ‘svg’
chẳng hạn. Cả hai hệ trục toạ độ khung nhìn mới và hệ trục toạ độ người dùng có
cùng gốc toạ độ tại (x,y), x và y tương ứng với các giá trị được thiết lập trong thành
phần thiết lập khung nhìn mới. Hướng của hệ trục toạ độ khung nhìn mới và hệ trục
toạ độ người dùng mới tương ứng với hướng của hệ trục toạ độ người dùng hiện tại
đối với thành phần thiết lập khung nhìn mới này. Mỗi đơn vị trong hệ trục toạ độ
Chương 3. Cấu trúc định dạng tập tin SVG
107
khung nhìn mới và hệ trục toạ độ người dùng mới cùng giá trị với đơn vị trong
khung nhìn hiện tại đối với thành phần thiết lập khung nhìn mới này.
Ví dụ 1: <?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="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>This SVG drawing embeds another one, thus establishing a new viewport </desc> <!-- The following statement establishing a new viewport and renders SVG drawing B into that viewport --> <svg x="25%" y="25%" width="50%" height="50%"> <!-- drawing B goes here --> </svg> </svg>
Các thành phần có thể thiết lập khung nhìn mới:
• Thành phần ‘svg’.
• Thành phần ‘symbol’ định nghĩa một khung nhìn mới bất kỳ khi nào
được dùng cụ thể bởi thành phần ‘use’.
• Thành phần ‘image’ tham chiếu tới một tập tin SVG sẽ thiết lập một
khung nhìn tạm thời vì trong nguồn tài nguyên được tham chiếu có một
thành phần ‘svg’.
• Thành phần ‘foreignObject’ (thành phần này không được mô tả trong
phạm vi tìm hiểu) tạo một khung nhìn mới để hiển thị nội dung trong
thành phần này.
Nếu khung nhìn mới thiết lập một đường xén mới thì sẽ được xác định bởi giá
trị ‘overflow’ của thành phần thiết lập khung nhìn mới này. Nếu một đường xén
được tạo tương ứng với khung nhìn mới, hình dạng của đường xén được xác định
bởi giá trị của thuộc tính ‘clip’.
Chương 3. Cấu trúc định dạng tập tin SVG
108
3.13 Định kiểu (styling)
3.13.1 Các thuộc tính định kiểu của SVG
SVG dùng thuộc tính định kiểu (styling properties) để mô tả cách thức các
thành phần đồ họa trong nội dung SVG được xây dựng. SVG dùng các thuộc tính
định kiểu sau:
• Tất cả các thuộc tính định nghĩa cách thức một đối tượng được vẽ như
màu tô, màu viền, độ rộng đường, nét vẽ….
• Các thuộc tính định kiểu văn bản, ‘font-family’ và ‘font-size’ ….
• Các tham số buộc các thành phần phải được xậy dựng theo giá trị của
nó, như đường xén, mặt nạ, hiệu ứng lọc….
SVG dùng các thuộc tính định kiểu đặc trưng của nó và của CSS và XSL.
Trong phạm vi đề tài, chỉ có cách định kiểu bằng thuộc tính trình diễn và CSS
được xét đến, còn XSL không được đề cập đến.
3.13.2 Định kiểu dùng thuộc tính trình diễn
Các thuộc tính trình diễn như ‘fill’, ‘stroke’, ‘clip-path’… được dùng trong các
thành phần cho trước để chỉ định cách thức các thành phần này được xây dựng.
Ví dụ 1:
Ví dụ sau minh hoạ cách dùng thuộc tính ‘fill’ và ‘stroke’ cho thành phần hình
chữ nhật (‘rect’). Hình chữ nhật sẽ được tô màu đỏ và viền xanh. <?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="10cm" height="5cm" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="200" y="100" width="600" height="300" fill="red" stroke="blue" stroke-width="3"/> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
109
Kết quả trên trình duyệt:
3.13.3 Định kiểu bằng CSS
SVG hỗ trợ định kiểu bằng trang định CSS như sau:
• Trang định kiểu CSS ngoài được liên kết vào tài liệu hiện tại
• Trang định kiểu CSS nội được nhúng trong tài liệu hiện tại, trong thành
phần ‘style’ của SVG.
• Định kiểu nội tuyến, khai báo thuộc tính CSS trong thuộc tính ‘style’
của một thành phần SVG đặc biệt.
Ví dụ 1:
Ví dụ sau minh hoạ cách sử dụng trang định kiểu CSS ngoại để thiết lập thuộc
tính ‘fill’ và ‘stroke’ trên tất cả các hình chữ nhật trong tài liệu SVG.
Trang định kiểu ngoại (mystyle.css): rect { fill: red; stroke: blue; stroke-width: 3
}
Hình 3.25 Minh họa thuộc tính ‘fill’
Chương 3. Cấu trúc định dạng tập tin SVG
110
Tài liệu SVG tham chiếu tới trang định kiểu ngoài mystyle.css <?xml version="1.0" standalone="no"?> <?xml-stylesheet href="mystyle.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="5cm" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="10" y="10" width="300" height="300"/> <rect x="320" y="10" width="400" height="300"/> </svg>
Kết quả trên trình duyệt là hai hình chữ nhật màu đỏ viền xanh:
Hình 3.26 Minh họa nội dung SVG có tham chiếu đến trang định kiểu CSS
Ví dụ 2:
Trang định kiểu CSS được nhúng trong nội dung SVG trong một thành phần
‘style’. Ví dụ minh hoạ cách dùng trang định kiểu CSS sau có kết quả như ví dụ 1
trên. <?xml version="1.0" standalone="no"?> <?xml-stylesheet href="mystyle.css" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <defs> <style type="text/css"><![CDATA[ rect { fill: red; stroke: blue; stroke-width: 3 } ]]></style> </defs> <svg width="10cm" height="5cm" viewBox="0 0 1000 500"
Chương 3. Cấu trúc định dạng tập tin SVG
111
xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="10" y="10" width="300" height="300"/> <rect x="320" y="10" width="400" height="300"/> </svg>
Chú ý trang định kiểu được đặt trong cấu trúc CDATA (<![CDATA[…]]>).
Đặt trang định kiểu CSS trong khối CDATA đôi khi cần thiết vì trang định kiểu
CSS có thể các chứa kí tự , ví dụ ‘>’, xung đột với bộ phân tích SVG. Thậm chí nếu
trang định kiểu không dùng các kí tự xung đột với bộ phân tích XML thì W3C
khuyên vẫn nên đặt trang đinh kiểu trong khối CDATA.
SVG hỗ trợ định kiểu CSS nội tuyến. Tương tự như thuộc tính ‘style’ trong
HTML (ngôn ngữ đánh dấu siêu văn bản), định kiểu CSS nội tuyến được khai báo
trong thuộc tính ‘style’ trong SVG bằng cách chỉ định một danh sách các phần tử
cách nhau bởi dấu phẩy (‘,’), mỗi phần tử là một khai báo thuộc tính dạng “tên
thuộc tính : giá trị”.
Ví dụ 3:
Ví dụ sau minh họa cách định kiểu cho hình chữ nhật bằng thuộc tính ‘style’.
Kết quả nhận được là một hình chữ nhật màu đỏ viền xanh. <?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="10cm" height="5cm" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="200" y="100" width="600" height="300" style="fill:red; stroke:blue; stroke-width:3"/> </svg>
Chú ý là tên thuộc tính và giá trị của thuộc tính trong SVG phân biệt hoa
thường. Do đó khai báo thuộc tính ‘FILL’ thay vì ‘fill’ sẽ dẫn đến kết quả không
như mong muốn.
Chương 3. Cấu trúc định dạng tập tin SVG
112
3.13.4 Thành phần ‘style’
Thành phần ‘style’ cho phép trang định kiểu được nhúng trực tiếp vào nội
dung SVG. Thành phần ‘style’ có cùng thuộc tính như trong HTML.
3.13.5 Thuộc tính ‘class’
class = <list>
Thuộc tính này chỉ định một tên lớp hay tập các tên lớp cho một thành
phần. Nhiều thành phần có thể được chỉ định cùng một tên lớp. Nếu
dùng nhiều tên lớp thì phải phân cách nhau bởi một hay nhiều khoảng
trắng.
Thuộc tính ‘class’ chỉ định một hay nhiều tên lớp cho một thành phần. Thành
phần có thể được coi là thuộc về các lớp này. Một tên lớp có thể được dùng chung
bởi nhiều thể hiện của thành phần. Thuộc tính ‘class’ có các vai trò sau:
• Là một bộ chọn lọc trang định kiểu (khi người dùng muốn gán thông tin
định kiểu cho một tập các thành phần).
• Dùng cho xử lý mục đích chung của các tác nhân người dùng.
Ví dụ 1:
Trong ví dụ sau, thành phần ‘text’ được dùng kết hợp với thuộc tính ‘class’ để
định kiểu cho thông điệp. <!—English messages --> <text class="info" lang="en">Variable declared twice</text> <text class="warning" lang="en">Undeclared variable</text> <text class="error" lang="en">Bad syntax for variable name</text>
Trong một tác nhân người dùng hỗ trợ định kiểu CSS, quy tắc định kiểu CSS
sẽ báo cho tác nhân người dùng phải hiển thị thông điệp ‘thông tin’ màu xanh,
thông điệp ‘cảnh báo’ màu vàng, và thông điệp ‘cảnh báo’ màu đỏ. text.info { color: green }
Chương 3. Cấu trúc định dạng tập tin SVG
113
text.warning { color: yellow } text.error { color: red }
3.13.6 Phạm vi của trang định kiểu:
• Tài liệu SVG độc lập:
Chỉ có một cây phân tích. Các trang định kiểu định nghĩa bất kỳ nơi đâu trong
tài liệu SVG (chẳng hạn, trong thành phần ‘style’, hoặc trong thuộc tính ‘style’,
hoặc trong trang định kiểu bên ngoài được tham chiếu) sẽ được áp dụng xuyên suốt
toàn bộ tài liệu SVG.
• Tài liệu SVG độc lập được nhúng trong một tài liệu HTML hay XML
bằng thành phần ‘img’, ‘object’ (HTML) hay ‘image’ (SVG)
Sẽ có hai cây phân tích riêng biệt; một cho tài liệu tham chiếu (có thể là
HTML hay XHTML), và một cho tài liệu SVG. Các trang định kiểu được định
nghĩa trong tài liệu tham chiếu sẽ được áp dụng xuyên suốt tài liệu tham chiếu
nhưng không ảnh hưởng đến tài liệu SVG được tham chiếu. Các trang định kiểu
trong tài liệu SVG được tham chiếu sẽ được áp dụng xuyên suốt toàn tài liệu SVG
nhưng không ảnh hưởng tới tài liệu tham chiếu (tức HTML, XHTML). Để một
trang định kiểu được dùng chung cho cả hai tài liệu [X]HTML và tài liệu SVG thì
cần liên kết chúng tới cùng một trang định kiểu.
• Nội dung SVG độc lập được nhúng nguyên bản vào một tài liệu XML
Chỉ có một cây phân tích dùng nhiều không gian tên. Cây này có một hay
nhiều cây con trong không gian tên SVG. Các trang định kiểu được định nghĩa
trong tài liệu XML sẽ được áp dụng cho toàn bộ tài liệu, bao gồm cả những phần
trong không gian tên SVG. Để có trang định kiểu khác cho phần SVG, ta nên dùng
thuộc tính định kiểu ‘style’, hoặc đặt một ID cho thành phần ‘SVG’ rồi dùng bộ
chọn lọc trang định kiểu CSS, hoặc bộ chọn lọc XSL.
Chương 3. Cấu trúc định dạng tập tin SVG
114
3.14 Đường xén
3.14.1 Giới thiệu:
Đường xén (clipping path) giới hạn khu vực vẽ. Ở mức khái niệm, bất kỳ phần
nào nằm ngoài vùng bao của đường xén đang được kích hoạt sẽ không được vẽ.
Một đường xén có thể được hiểu là như một mặt nạ có các điểm ảnh bên ngoài
đường xén là màu đen với giá trị trong suốt là “0” và các điểm ảnh bên trong đường
xén là màu trắng với giá trị trong suốt là “1”.
3.14.2 Đường xén ban đầu
Khi một thành phần ‘svg’ là thành phần gốc trong tài liệu hay được nhúng
trong một tài liệu mà cách bố trí của nó (tài liệu chứa) được xác định tùy vào các
quy tắc bố trí của CSS hay XSL, thì tác nhân người dùng phải thiết lập một đường
xén ban đầu cho phân đoạn tài liệu SVG. Thuộc tính ‘overflow’ và thuộc tính ‘clip’
cùng với quy tắc xử lý của tác nhân người dùng sẽ hỗ trợ xác định đường xén ban
đầu mà tác nhân người dùng thiết lập cho phân đoạn tài liệu SVG.
3.14.3 Thuộc tính ‘overflow’ và ‘clip’
Thuộc tính ‘overflow’ nhận một trong các giá trị “visible”, “hidden”, “scroll”,
“auto”, “inherit”.
Thuộc tính này được dùng cho các thành phần thiết lập khung nhìn mới, thành
phần ‘pattern’, và thành phần ‘marker’.
Thuộc tính này không được kế thừa.
Cần lưu ý các điểm sau đối với thuộc tính ‘overflow’:
• Thuộc tính ‘overflow’ áp dụng cho các thành phần thiết lập khung nhìn
mới (ví dụ, thành phần ‘svg’), thành phần ‘pattern’ và thành phần
Chương 3. Cấu trúc định dạng tập tin SVG
115
‘marker’. Các thành phần khác không chịu ảnh hưởng từ thuộc tính này
(nghĩa là một hình chữ nhật xén không được tạo).
• Đối với các thành phần có thể áp dụng thuộc tính ‘overflow’, nếu thuộc
tính ‘overflow’ có giá trị “hidden” hoặc “scroll”, kết quả là đường xén
hình dạng hình chữ nhật được tạo ra. Kết quả này tương đương với việc
định nghĩa một thành phần ‘clipPath’ có nội dung là một thành phần
‘rect’; sau đó thành phần ‘clipPath’ này được thành phần cho sẵn (thành
phần tạo khung nhìn) tham chiếu tới bằng thuộc tính ‘clipPath’ thông
qua <uri>.
• Nếu thuộc tính ‘overflow’ có giá trị khác ‘hidden’ hoặc ‘scroll’ thì
thuộc tính này không ảnh hưởng gì cả (đường xén hình chữ nhật không
đươc tạo).
• Trong nội dung SVG, giá trị ‘auto’ bằng với “visible”.
• Khi thành phần ‘svg’ ngoài cùng được nhúng nội tuyến trong một văn
phạm XML cha dùng trang định kiểu phân lớp CSS hoặc trang định
dạng XSL: nếu thuộc tính ‘overflow’ có giá trị ‘hidden’ hay ‘scroll’, thì
tác nhân người dùng sẽ thiết lập một đường xén bằng với đường bao
của khung nhìn ban đầu. Ngược lại, đường xén sẽ được thiết lập tùy vào
quy tắc xén được định nghĩa trong trang định kiểu phân lớp.
• Khi thành phần ‘svg’ ngoài cùng là một tài liệu độc lập hay được nhúng
nội tuyến trong văn phạm XML cha không dùng trang định kiểu phân
lớp CSS hay trang định dạng XSL, thì thuộc tính ‘overflow’ trên thành
phần ‘svg’ ngoài cùng bị bỏ qua. Lý do của việc này là mục đích hiển
thị. Đường xén ban đầu được thiết lập tương ứng với đường bao của
khung nhìn ban đầu.
• Giá trị khởi tạo của thuộc tính ‘overflow’ là “visible”. Tuy nhiên, trang
định kiểu tác nhân người dùng sẽ nạp đè giá trị này, đồng thời thiết lập
Chương 3. Cấu trúc định dạng tập tin SVG
116
giá trị ‘overflow’ của thành phần thiết lập khung nhìn mới (ví dụ, thuộc
tính ‘svg’), thành phần ‘pattern’ và thành phần ‘marker’. Giá trị được
thíết lập là ‘hidden’.
Như kết quả ở trên, ứng xử mặc định của tác nhân người dùng SVG là thiết lập
một đường xén ứng với đường bao của khung nhìn ban đầu và thiết lập một đường
xén mới cho mỗi thành phần thiết lập khung nhìn mới và mỗi thành phần ‘pattern’
và ‘marker’.
Thuộc tính clip:
clip = <shape>|auto|inherit
Thuộc tính ‘clip’ có cùng giá trị tham số như được định nghĩa trong [CSS2-
clip]. Giá trị không có đơn vị kèm theo sẽ được tính theo đơn vị của hệ trục toạ độ
hiện tại. Giá trị “auto” định nghĩa một đường xén trùng với đường bao của khung
nhìn được tạo bởi thành phần cho sẵn.
3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’
Chú ý rằng giá trị khởi tạo của thuộc tính ‘overflow’, ‘clip’ và trang định kiểu
tác nhân người dùng sẽ ảnh hưởng tới kết quả khởi tạo đường xén ban đầu. Đường
xén này được thiết lập cho đường bao của khung nhìn ban đầu. Khi thuộc tính
‘viewBox’ và ‘preserveAspectRatio’ được chỉ định, đôi khi người ta yêu cầu thiết
lập đường xén cho đường bao của ‘viewBox’ thay cho khung nhìn (hoặc hình chữ
nhật tham chiếu trong trường hợp của thành phần ‘marker’ và ‘pattern’), đặc biệt là
khi thuộc tính ‘preserveAspectRatio’ chỉ định đồng nhất tỉ lệ và tỉ lệ cạnh của
‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn.
Để thiết lập đường xén ban đầu cho đường bao của ‘viewBox’, ta thiết lập
đường bao của thuộc tính ‘clip’ trùng với hình chữ nhật được chỉ định trong thuộc
tính ‘viewBox’. Chú ý là các tham số của thuộc tính ‘clip’ là <top>, <right>,
<bottom>, <left>. Ngược lại, đối với thuộc tính ‘viewBox’ là <min-x>, <min-y>,
<width>, <height>.
Chương 3. Cấu trúc định dạng tập tin SVG
117
3.14.5 Thiết lập đường xén mới
Một đường xén được định nghĩa bằng một thành phần ‘clipPath’. Một đường
xén được dùng hoặc được tham chiếu bằng thuộc tính ‘clip-path’.
Một thành phần ‘clipPath’ có thể chứa các thành phần ‘path’, ‘text’, các hình
cơ sở (‘circle’) hoặc thành phần ‘use’. Nếu thành phần ‘use’ là con của thành phần
‘clipPath’, nó phải tham chiếu trực tiếp tới thành phần ‘path’, ‘text’, hay thành phần
hình học cơ sở. Tham chiếu không trực tiếp sẽ gây ra lỗi.
Hình không viền của mỗi thành phần con (bỏ qua các thuộc tính vẽ, như ‘fill’,
‘stroke’, ‘stroke-width’) của ‘clipPath’ sẽ định nghĩa ở mức khái niệm một mặt nạ
1-bit. Bất kỳ thành phần nào nằm ngoài đường viền sẽ bị che khuất. Khi thành phần
‘clipPath’ chứa nhiều thành phần con, một điểm được cho là nằm trong đường xén
nếu nó nằm trong bất kỳ con nào của ‘clipPath’.
Đối với thành phần đồ họa cho sẵn, đường xén thực sự được dùng là vùng giao
nhau giữa các đường xén (được chỉ định bởi thuộc tính ‘clip-path’) với bất kỳ
đường xén nào trong thành phần cha của nó (được chỉ định bởi thuộc tính ‘clip-
path’ trong thành phần cha hoặc bởi thuộc tính ‘overflow’ trong thành phần cha
thiết lập khung nhìn mới).
Hai điểm cần lưu ý:
• Bản thân thành phần ‘clipPath’ và thành phần con của nó không kế thừa
đường xén từ thành phần tổ tiên của thành phần ‘clipPath’ này.
• Thành phần ‘clipPath’ hay bất kỳ thành phần con của nó đều có thể chỉ
định thuộc tính ‘clipPath’. Nếu một tham chiếu ‘clipPath’ hợp lệ được
đặt trong thành phần ‘clipPath’, thì đường xén nhận được là phần giao
của các nội dung của thành phần ‘clipPath’ với các đường xén được
tham chiếu.
Nếu tham chiếu ‘clipPath’ hợp lệ được đặt trong một thành phần con
của thành phần ‘clipPath’, thì thành phần con cho sẵn sẽ được xén bởi
Chương 3. Cấu trúc định dạng tập tin SVG
118
đường xén được tham chiếu đó trước khi hội (OR) các hình chiếu của
thành phần con này với các hình chiếu của thành phần con khác.
Một số thuộc tính của thành phần ‘clipPath’:
clipPathUnits = “userSpaceOnUse | objectBoudingBox”
Định nghĩa hệ trục toạ độ cho nội dung của thành phần ‘clipPath’.
Nếu clipPathUnits = “userSpaceOnUse” thì nội dung của thành phần
‘clipPath’ sẽ cung cấp giá trị theo hệ trục toạ độ hiện tại, nơi mà thành
phần ‘clipPath’ được tham chiếu (nghĩa là hệ trục toạ độ của thành
phần tham chiếu tới thành phần ‘clipPath’ thông qua thuộc tính ‘clip-
path’).
Nếu clipPathUnits = “objectBoundingBox” thì hệ trục toạ độ của nội
dung của thành phần ‘clipPath’ sẽ được thiết lập bằng cách dùng
đường bao (bounding box) của thành phần sử dung đường xén này.
Nếu thuộc tính ‘clipPathUnits’ không được chỉ định, thì giá trị mặc
định là “userSpaceOnUse”.
Thuộc tính kế thừa vào thành phần ‘clipPath’ từ thành phần cha của nó, thuộc
tính không kế thừa từ thành phần tham chiếu thành tới phần ‘clipPath’.
Thành phần ‘clipPath’ không bao giờ được hiển thị trực tiếp, cách sử dụng duy
nhất của nó là xem nó là một cái gì đó có thể được tham chiếu bằng thuộc tính ‘clip-
path’. Thuộc tính ‘display’ không áp dụng cho thành phần ‘clipPath’; do đó thành
phần ‘clipPath’ không được hiển thị trực tiếp thậm chỉ thuộc tính ‘display’ được
thiết lập khác “none”, và thành phần ‘clipPath’ sẵn sàng cho tham chiếu thậm chí
khi thuộc tính ‘display’ trên thành phần ‘clipPath’ hay bất kỳ thành phần cha của nó
được thiết lập thành “none”.
Chương 3. Cấu trúc định dạng tập tin SVG
119
clip-path = <uri> | none | inherit
<uri> là một tham chiếu tới một đối tượng đồ hoạ khác trong cùng
một phân đoạn tài liệu SVG mà sẽ được dùng như đường xén.
Mặc định là ‘none’.
clip-rule = nonzero | evenodd | inherit
Thuộc tính ‘clip-rule’ chỉ áp dụng cho các thành phần đồ hoạ được chứa
trong một thành phần ‘clipPath’. Phân đoạn sau sẽ áp dụng quy tắc xén
evennodd (chẵn-lẽ) cho đường xén vì thuộc tính ‘clip-rule’ được chỉ
định trên thành phần ‘path’. Thành phần ‘path’ này định nghĩa hình
dạng đường xén.
<g clip-rule="nonzero"> <clipPath id="MyClip"> <path d="..." clip-rule="evenodd" /> </clipPath> <rect clip-path="url(#MyClip)" ... /> </g>
Ngược lại phân đoạn sau sẽ không dung quy tắc xén ‘evenodd’ cho đường xén
vì thuộc tính ‘clip-rule’ được chỉ định trong thành phần tham chiếu, không phải trên
đối tượng định nghĩa hình dạnh đường xén.
<g clip-rule="nonzero"> <clipPath id="MyClip"> <path d="..." /> </clipPath> <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /> </g>
Ví dụ 1:
Vi dụ sau minh cách dùng đường xén bằng thành phần ‘clipPath’:
Chương 3. Cấu trúc định dạng tập tin SVG
120
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd "> <svg width="236" height="295"> <defs> <clipPath id="clipRecorte"> <path d="M0,0 L100,0 L100,100 L0,100 Z" /> </clipPath> </defs> <image width="236" height="295" xlink:href="a.gif" opacity="0.3" /> <image width="236" height="295" xlink:href="a.png" clip-path="url(#clipRecorte)" /> <rect id="filtered" width="100" height="100" style="fill: red; fill-opacity: 0; stroke: red; stroke-width: 1; shape-rendering: optimizeSpeed;" /> </svg>
Kết quả trên trình duyệt: ảnh “a.png” bị làm mờ đi do thuộc tính ‘fill-opacity =
0.3’, ảnh “a.png” thứ hai chỉ hiển thị phần trong của đường xén hình chữ nhật
clipRecorte:
Hình 3.27 Minh họa thành phần ‘clipPath’
Chương 3. Cấu trúc định dạng tập tin SVG
121
3.15 Thành phần ‘path’
3.15.1 Giới thiệu
‘Path’ (đường) có thể là đường viền của một hình tô màu được, hoặc là màu
viền, hoặc là đường xén, hoặc là kết hợp của các tính năng này.
Một đường được mô tả bằng cách dùng khái niệm “toạ độ hiện tại”. Chẳng
hạn, khi vẽ trên giấy, “toạ độ hiện tại” được hiểu là vị trí của cây viết. Vị trí của viết
có thể thay đổi, và đường viền của hình (là đường mở hoặc đóng) sẽ được vẽ bằng
cách rê bút theo đường cong hay đường thẳng từ “toạ độ hiện tại”.
Đường là viền ngoài của một đối tượng được định nghĩa bằng các thuật ngữ
‘moveto’ (thiết lập vị trí hiện tại mới), ‘lineto’ (vẽ một đường thẳng), ‘curveto’ (vẽ
một đường cong Bézier), ‘arc’ (vẽ cung tròn hay cung e-líp) và ‘closepath’ (vẽ
ngược lại điểm ban đầu).
Đường phức là một đường gồm nhiều đường con.
3.15.2 Thành phần ‘path’
Một số thuộc tính của thành phần ‘path’:
• d= “path data”
Định nghĩa đường viền của hình.
• pathLength = “<number>”
Độ dài ước lượng của đường được người hoặc công cụ tạo ra nó tính
toán.
3.15.3 Dữ liệu đường (path data)
Thành phần ‘path’ chứa một thuộc tính d = “(path data)”. Thuộc tính d chứa
các chỉ thị “moveto”, “line”, “curve”, “closepath” và các toạ độ trong hệ trục toạ độ
người dùng hiện tại.
Chương 3. Cấu trúc định dạng tập tin SVG
122
Ví dụ 1: Ví dụ sau xây dựng một đường (là hình tam giác). Chỉ thị M tương
ứng với lệnh “moveto”, L tương ứng với “lineto”, z tương ứng với “closepath”. <?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="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a triangle</desc> <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" /> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> </svg>
Kết quả trên trình duyệt:
Hình 3.28 Minh họa thành phần ‘path’
3.16 Thành phần ‘text’
3.16.1 Giới thiệu
Văn bản là một phần của phân đoạn tài liệu SVG được xây dựng bởi thành
phần ‘text’. Thành phần ‘text’ được xây dựng như các thành phần đồ họa khác. Do
đó các tính năng như phép biến đổi toạ độ, vẽ, xén, mặt nạ đều áp dụng được cho
thành phần ‘text’ giống như cho các thành phần hình học (đường và hình chữ nhật
chẳng hạn).
Chương 3. Cấu trúc định dạng tập tin SVG
123
SVG không tự động xuống dòng khi hiển thị văn bản. Để hiển thị nhiều dòng
chúng ta dùng các phương pháp sau:
• Dùng nhiều thành phần ‘text’ để hiển thị nhiều dòng
• Dùng một thành phần ‘text’ với nhiều thành phần ‘tspan’ con có các
thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’ để thiết lập vị trí mới cho phần văn bản
trong dòng mới. Cách này cho phép người dùng chọn nhiều dòng
văn bản khác nhau.
• Mô tả văn bản trong một không gian tên XML khác (XHTML chẳng
hạn) sau đó nhúng nội tuyến trong một thành phần ‘foreignOject’
(không được trình bày ở trong phạm vi đề tài này).
Chuỗi văn bản trong thành phần ‘text’ có thể được hiển thị trên một hàng
thẳng, hay dọc theo hình dạng của một thành phần ‘path’. SVG hỗ trợ các tính năng
hiển thị văn bản trên hàng thẳng và trên thành phần ‘path’ như sau:
• Hiển văn bản theo hướng thẳng đứng hay hướng ngang
• Hiển thị văn bản theo hướng từ trái sang phải hai theo cả hai chiều
• Hỗ trợ phông chữ
Bởi vì văn bản trong SVG được đóng gói như dữ liệu kí tự XML nên:
• Dữ liệu văn bản trong nội dung SVG có thể truy cập được.
• Người dùng có thể chọn, tìm kiếm, sao chép phần văn bản được
chọn vào vùng đệm.
• Các công cụ tìm kiếm tương thích XML sẽ tìm các chuỗi văn bản
trong nội dung SVG như trong tài liệu XML.
SVG hỗ trợ nội dung SVG đa ngôn ngữ.
3.16.2 Thành phần ‘text’
Thành phần ‘text’ định nghĩa một thành phần đồ hoạ chứa chuỗi văn bản.
Thành phần ‘text’ chứa trong nó dữ liệu văn bản, các thuộc tính định hướng, phông
Chương 3. Cấu trúc định dạng tập tin SVG
124
chữ, màu. Thành phần ‘text’ dùng cùng phương thức xây dựng (render) như các
thành phần đồ hoạ khác.
Thành phần ‘text’ xây dựng nét vẽ (glyph) đầu tiên của nó tại vị trí văn bản
hiện tại khởi tạo (initial curent text position). Vị trí này được thiết lập bởi thuộc
tính ‘x’ và ‘y’ trên thành phần ‘text’. Vị trí “văn bản hiện tại khởi tạo” này có thể
được điều chỉnh theo giá trị của thuộc tính ‘text-anchor’, sự có mặt của thành phần
‘textPath’ chứa kí tự đầu tiên, và/hoặc giá trị của thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’ trên
thành phần ‘tspan’, ‘tref’ hoặc ‘altGlyph’ chứa kí tự đầu tiên. Sau khi nét vẽ tương
ứng với kí tự cho sẵn được xây dựng xong, vị trí văn bản hiện tại được cập nhật cho
kí tự kế tiếp.Trong trường hợp đơn giản nhất, vị trí văn bản hiện tại bằng vị trí hiện
tại trước đó cộng với giá trị tăng lên do nét vẽ gây ra (theo chiều ngang hay chiều
dọc).
Một số thuộc tính của thành phần ‘text’:
• x = “<coordinate>+”
Nếu một <coordinate> được cung cấp thì giá trị này cho biết toạ độ X
tuyệt đối của vị trí văn bản hiện tại. Vị trí này được dùng để xây dựng
các nét vẽ tương ứng với kí tự đầu tiên trong thành phần ‘text’ này hoặc
bất kỳ thành phần con nào khác của nó.
Nếu một mảng gồm <n> phần tử <coordinate> được cung cấp thì các
giá trị này cho biết các toạ độ X của vị trí văn bản hiện tại. Các vị trí
này được dùng để xây dựng các nét vẽ tương ứng với <n> kí tự ban đầu
trong thành phần ‘text’ này hoặc bất kỳ thành phần con của nó.
Giá trị mặc định là “0”
• y = “<coordinate>+”
Xử lý như thuộc tính ‘x’ nhưng trên trục y.
• dx = “<length>”
Chương 3. Cấu trúc định dạng tập tin SVG
125
Thiết lập độ dịch chuyển dọc theo trục x so với vị trí văn bản hiện tại
cho các kí tự trong thành phần ‘text’ này hay bất kỳ thành phần con nào
của nó.
• dy = “<length>”
Tác dụng như thuộc tính ‘dx’ nhưng trên trục y.
• rotate = “<number>+”
Thiết lập góc quay của các nét vẽ tương ứng với các kí tự quanh vị trí
văn bản hiện tại.
Thuộc tính “text-anchor” và “font-family” dùng để canh lề và thiết lập phông
chữ cho phần văn bản trong thành phần “text” (sẽ được trình bày sau). Ngoài ra,
một số thuộc tính khác nữa cũng được sử dụng nhưng không được mô tả ở đây.
Ví dụ 1:
Xuất chuỗi “Hello, out there” trên phông nền, dùng phông chữ Verdana và tô
các nét vẽ màu xanh. <?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="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example text01 - 'Hello, out there' in blue</desc> <text x="250" y="150" font-family="Verdana" font-size="55" fill="blue" > Hello, out there </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
126
Kết quả trên trình duyệt:
3.16.3 Thuộc tính thiết lập phông chữ cho thành phần ‘text’
Một số thuộc tính dùng để thiết lập phông chữ cho văn bản (thành phần ‘text’,
‘tspan’, ‘tref’).
font-family =
[[ <family-name> |<generic-family> ],]* [<family-name> |<generic-
family>] | inherit
Thuộc tính này dùng để chỉ định họ phông chữ được dùng để hiển thị
văn bản.
font-style = normal | italic | oblique | inherit
Thuộc tính này dùng để chỉ định kiểu hiển thị văn bản là bình thường
(normal), nghiên (italic), hay trong suốt (oblique).
font-variant = normal | small-caps | inherit
Thuộc tính này dùng để chỉ định văn bản hiển thị dưới dạng chữ thường
hay chữ hoa.
font-weight =
normal | bold | bolder | lighter | 100 | 200 | 300
| 400 | 500 | 600 | 700 | 800 | 900 | inherit
Thuộc tính này dùng để chỉ định độ lớn, nhỏ của nét vẽ tương ứng với
các phông chữ khác nhau trong cùng một họ.
Hình 3.29 Minh họa thành phần ‘text’
Chương 3. Cấu trúc định dạng tập tin SVG
127
font-size =
<absolute-size> | <relative-size> |<length> | <percentage> | inherit
Thuộc tính này dùng để chỉ định kích thước phông chữ hiển thị cho văn
bản. Trong tài liệu SVG, nếu <length> được cung cấp mà không có đơn
vị chỉ định (ví dụ, giá trị 128) thì tác nhân người dùng hiểu <length> là
giá trị chiều cao của chữ trong hệ trục toạ độ người dùng hiện tại.
Nếu <length> được cung cấp với một đơn vị chỉ định cụ thể (ví dụ, 12pt
hoặc 10%), thì tác nhân người dùng sẽ chuyển <length> sang giá trị
tương ứng trong hệ trục toạ độ người dùng hiện tại.
font-size-adjust = <number> | none | inherit
Thuộc tính này dùng để chỉ định giá trị riêng cho một thành phần để
bảo toàn chiều cao của phông chữ được chọn đầu tiên trong phông chữ
thay thế.
font =
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?<'font-size'> [ /
<'line-height'> ]? <'font-family'> ] |caption | icon | menu | message-box|
small-caption | status-bar | inherit
Một thuộc tính dùng để thiết lập nhanh ‘font-style’ (kiểu phông chữ),
‘font-variant’ (chữ hoa, chữ thường), ‘font-weight’(độ lớn của nét chữ),
‘font-size’ (kích thước chữ), ‘line-height’ (được hiển là ‘font-size’) và
‘font-family’ (họ phông chữ).
Định nghĩa chi tiết của các thuộc tính này trong đặc tả trang định kiểu phân
cấp (CSS) (không được trình bày ở đây).
3.16.4 Thuộc tính canh lề
Trong phạm vi đề tài, chỉ có thuộc tính canh lề ‘text-anchor’ được xét đến.
Chương 3. Cấu trúc định dạng tập tin SVG
128
Thuộc tính ‘text-anchor’ được dùng để canh lề cho chuỗi văn bản tương đối so
với điểm cho trước.
Thuộc tính ‘text-anchor’ nhận một trong các giá trị sau “start”, “middle”,
“end”, “inherit”. Mặc định là “start”.
Ý nghĩa của các giá trị:
• start
Vị trí bắt đầu chuỗi trùng với vị trí văn bản hiện tại khởi tạo.
• middle
Vị trí giữa của chuỗi văn bản trùng với vị trí văn bản hiện tại khởi tạo.
• end
Vị trí cuối chuỗi trùng với vị trí văn bản hiện tại khởi tạo.
3.16.5 Thành phần ‘tspan’
Thành phần ‘tspan’ là thành phần con trong thành phần ‘text’. Thuộc tính văn
bản, phông chữ và vị trí văn bản hiện tại có thể được điều chỉnh bằng các giá trị tọa
độ tương đối hay tuyệt đối trong thành phần ‘tspan’.
Một số thuộc tính của thành phần ‘tspan’:
• Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’, các thuộc tính thiết lập phông
chữ, canh lề nội dung văn bản thì tương tự như các thuộc tính của
thành phần ‘text’. Ngoài ra, ‘tspan’ còn có các tính chất khác nhưng
không được trình bày trong phạm vi tìm hiểu.
Ví dụ 1: Ví dụ sau dùng thành phần ‘tspan’ để hiển thị từ “not” với phông chữ
đậm và màu đỏ. <?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="10cm" height="3cm" viewBox="0 0 1000 300"
Chương 3. Cấu trúc định dạng tập tin SVG
129
xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example tspan01 - using tspan to change visual attributes</desc> <g font-family="Verdana" font-size="45" > <text x="200" y="150" fill="blue" > You are <tspan font-weight="bold" fill="red" >not</tspan> a banana. </text> </g> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Kết quả trên trình duyệt :
Ví dụ 2: Ví dụ sau dùng thuộc tính ‘dx’ và ‘dy’ trên thành phần ‘tspan’ để hiệu
chỉnh vị trí văn bản hiện tại cho chuỗi văn bản đặc biệt trong thành phần ‘text’. <?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="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example tspan02 - using tspan's dx and dy attributes for incremental positioning adjustments</desc> <g font-family="Verdana" font-size="45" > <text x="200" y="150" fill="blue" > But you <tspan dx="2em" dy="-50" font-weight="bold" fill="red" > are </tspan> <tspan dy="100"> a peach!
Hình 3.30. Minh họa thành phần ‘tspan’
Chương 3. Cấu trúc định dạng tập tin SVG
130
</tspan> </text> </g> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Kết quả trên trình duyệt :
Ví dụ 3: Ví dụ sau dùng thuộc tính ‘x’ và ‘y’ trên thành phần ‘tspan’ để thiết
lập vị trí mới cho mỗi kí tự trong chuỗi. Ví dụ này hiển thị hai dòng trong cùng một
thành phần ‘text’. <?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="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example tspan03 - using tspan's x and y attributes for multiline text and precise glyph positioning</desc> <g font-family="Verdana" font-size="45" > <text fill="rgb(255,164,0)" > <tspan x="300 350 400 450 500 550 600 650" y="100"> Cute and </tspan> <tspan x="375 425 475 525 575" y="200"> fuzzy </tspan> </text> </g> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Hình 3.31. Minh họa thành phần ‘tspan’ có một vị trí đặc biệt
Chương 3. Cấu trúc định dạng tập tin SVG
131
Kết quả trên trình duyệt:
3.16.6 Thành phần ‘tref’
Nội dung văn bản của thành phần ‘text’ có thể là dữ liệu kí tự được nhúng trực
tiếp trong thành phần ‘text’, hoặc cũng có thể là nội dung dữ liệu văn bản của một
thành phần được tham chiếu. Tham chiếu này được thực hiện bởi thành phần ‘tref’,
thành phần ‘tref’ này là con của thành phần ‘text’.
Một số thuộc tính của thành phần ‘tref’:
• xlink:href = “<uri>”
Một tham chiếu URI tới một thành phần hay phân đoạn trong một phân
đoạn tài liệu SVG mà nội dung dữ liệu kí tự của nó (thành phần được
tham chiếu) sẽ được dùng như dữ liệu kí tự của thành phần ‘tref’.
• Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’ có cùng ý nghĩa với các thuộc
tính tương ứng của thành phần ‘tspan’. Các thuộc tính này được dùng
như thể thành phần ‘tref’ được thay thế bới một thành phần ‘tspan’,
trong đó dữ liệu kí tự được tham chiếu sẽ được nhúng vào trong thành
phần ‘tspan’ giả thuyết này.
Ví dụ 1: Ví dụ sau minh hoạ cách dùng dữ liệu kí tự từ một thành phần khác
như là dữ liệu kí tự của một thành phần ‘tspan’ cho sẵn. Thành phần ‘text’ có id =
“ReferencedText” sẽ không được hiển thị vì nó là con của thành phần ‘defs’. Thành
phần ‘text’ thứ hai hiển thị chuỗi : “Inline character data”. Thành phần ‘text’ thứ ba
hiển thị chuỗi “Referenced character data”. Nó (thành phần ‘text’ thứ ba) chứa một
Hình 3.32. Minh họa thành phần ‘tspan’ thiết lập vị trí
mới cho mỗi kí tự trong chuỗi
Chương 3. Cấu trúc định dạng tập tin SVG
132
thành phần ‘tref’ tham chiếu tới một thành phần có ‘text’ khác (có id =
“ReferencedText”, và dữ liệu kí tự là “Referenced character data”). <?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="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="ReferencedText"> Referenced character data </text> </defs> <desc>Example tref01 - inline vs reference text content</desc> <text x="100" y="100" font-size="45" fill="blue" > Inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#ReferencedText"/> </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />
</svg>
Kết quả trên trình duyệt:
3.17 Vẽ chữ dọc theo một đường
3.17.1 Giới thiệu:
Ngoài khả năng vẽ chữ trên một hàng thẳng, SVG còn hỗ trợ khả năng vẽ chữ
dọc theo hình dáng của một thành phần ‘path’. Để chỉ định một chuỗi hiển thị dọc
Hình 3.33. Minh họa thành phần ‘tref’
Chương 3. Cấu trúc định dạng tập tin SVG
133
theo hình dạng của một thành phần ‘path’, ta dùng thành phần ‘textPath’. Thành
phần này có một thuộc tính ‘xink:href’ chứa một tham chiếu URI tới một thành
phần ‘path’ sẽ được dùng làm khung cho nội dung văn bản hiển thị trên đó (thành
phần ‘path’ này không được hiển thị trên màn hình ).
3.17.2 Thành phần ‘textPath’
Một số thuộc tính của thành phần ‘textPath’
startOffset= “<lenght>”
Dùng xác định vị trí bắt đầu vẽ chữ trên ‘path’, chính là khoảng cách từ
vị trí đầu đường đến vị trí bắt đầu vẽ chữ, được tính bằng thuật toán
tính khoảng cách của tác nhân người dùng.
Thuộc tính này có thể nhận giá trị phần trăm (%) . Khi đó ‘startOffset’
là phần trăm độ dài của toàn bộ đường. Nếu startOffset= “0%” chỉ định
vị trí bắt đầu của ‘path’ và startOffset= “100%” tương đương với vị trí
kết thúc của ‘path’.
Không nhận giá trị âm. Giá trị mặc định là “0”.
method = “align| strech”
Thuộc tính này dùng để chỉ định phương thức hiển thị chữ.
spacing = “auto | exact”
Dùng xác định khoảng cách giữa các kí tự được hiển thị dọc theo
đường.
Giá trị mặc định là ‘auto’ chỉ định tác nhân người dùng sử dụng thuật
toán hiển thị chữ trên đường để chỉnh khoảng cách của các kí tự là đẹp
nhất.
Thuộc tính này có thể nhận một giá trị số nguyên để chỉ định khoảng
cách giữa các kí tự.
Chương 3. Cấu trúc định dạng tập tin SVG
134
xlink:href = “<uri>”
Tham chiếu URI tới một thành phần ‘path’ mà các kí tự sẽ hiển thị dọc
theo đó. Nếu <uri> là một tham chiếu không hợp lệ (ví dụ, thành phần
được tham chiếu không tồn tại hoặc thành phần được tham chiếu không
phải là thành phần ‘path’) thì nó gây ra lỗi và toàn bộ nội dung sẽ
không được tác nhân người dùng hiển thị.
Các toạ độ trong dữ liệu đường (path data) của thành phần ‘path’ được tham
chiếu được tính theo đơn vị của hệ trục toạ độ như của thành phần ‘text’, mà không
theo tính theo đơn vị của hệ trục toạ độ nơi thành phần ‘path’ được định nghĩa.
Thuộc tính ‘transform’ của thành phần ‘path’ được tham chiếu cung cấp một phép
biến đổi bổ sung.
Ví dụ: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g transform="translate(25,25)"> <defs> <path id="path1" transform="scale(2)" d="..." fill="none" stroke="red"/> </defs> </g> <text transform="rotate(45)"> <textPath xlink:href="#path1">Text along path1</textPath> </text> </svg>
Nó tương đương với định nghĩa sau: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g transform="rotate(45)"> <defs> <path id="path1" transform="scale(2)" d="..." fill="none" stroke="red"/> </defs> <text>
Chương 3. Cấu trúc định dạng tập tin SVG
135
<textPath xlink:href="#path1">Text along path1</textPath> </text> </g> </svg>
Như vậy dòng transform="translate(25,25)" không ảnh hưởng tới
thành phần ‘textPath’. Ngược lại trong đoạn tài liệu thứ hai, dòng
transform="rotate(45)" ảnh hưởng tới cả hai thành phần ‘text’ và ‘path’.
Ví dụ 1: Ví dụ đơn giản sau vẽ chữ dọc theo đường <?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="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap01 - simple text on a path</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go up, then we go down, then up again </textPath> </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
136
Kết quả trên trình duyệt là:
Hình 3.34. Minh họa thành phần ‘textPath’
Ví dụ 2: Thành phần ‘tspan’ được dùng trong thành phần ‘textPath’ để điều
chỉnh thuộc tính định kiểu và hiệu chỉnh lại toạ độ văn bản hiện tại trước khi xây
dựng một nét vẽ cụ thể. Từ “up” sẽ được tô đỏ và được nâng lên cao nhờ thuộc tính
‘dy’ trong thành phần ‘tspan’. <?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="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap02 - tspan within textPath</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath"> We go <tspan dy="-30" fill="red" > up </tspan> <tspan dy="30"> , </tspan> then we go down, then up again </textPath> </text>
Chương 3. Cấu trúc định dạng tập tin SVG
137
<!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>
Kết quả trên trình duyệt:
Hình 3.35. Minh họa thành phần ‘textPath’ có sử dụng thuộc tính ‘tspan’
Ví dụ 3: Minh hoạ cách sử dụng thuộc tính ‘startOffset’ trên thành phần
‘textPath’ để chỉ định vị trí bắt đầu của chuỗi văn bản trên thành phần ‘path’. Chú ý
rằng các nét vẽ vượt ra khỏi điểm cuối của đường sẽ khộng được hiển thị. <?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="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap03 - text on a path with startOffset attribute</desc> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath xlink:href="#MyPath" startOffset="80%"> We go up, then we go down, then up again </textPath> </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298"
Chương 3. Cấu trúc định dạng tập tin SVG
138
fill="none" stroke="blue" stroke-width="2" /> </svg>
Kết quả trên trình duyệt:
Hình 3.36. Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’
3.18 Khả năng ảnh động của SVG - thành phần ‘animate’
3.18.1 Giới thiệu
SVG hỗ trợ khả năng thay đổi ảnh đồ hoạ véc-tơ theo thời gian. Nội dung
SVG có thể thay đổi động theo các cách sau:
• Dùng thành phần “ảnh động” của SVG. Phân đoạn tài liệu SVG có thể
mô tả các thay đổi dựa theo thời gian cho các thành phần của tài liệu.
Bằng cách dùng các thành phần ảnh động khác nhau, chúng ta có thể
định nghĩa các chuyển động theo đường, hiệu ứng sáng và mờ đi, các
đối tượng lớn lên, nhấp nháy, quay và thay đổi màu….
• Dùng SVG DOM. Mỗi thuộc tính và trang định kiểu có thể được truy
cập bằng script, và SVG đưa ra một tập các giao diện DOM hỗ trợ tạo
ảnh động bằng script. Kết quả là bất kỳ loại ảnh động nào đều có thể
được tạo ra. Khả năng định giờ (timer) bằng ngôn ngữ viết script, như
ECMAScript, có thể được dùng để kích hoạt và kiểm soát ảnh động.
• SVG được thiết kế để các phiên bản trong tương lai của SMIL dùng nội
dung SVG tĩnh hay động như những thành phần phương tiện truyền
thông.
Chương 3. Cấu trúc định dạng tập tin SVG
139
• Trong tương lai, phiên bản mới của SMIL sẽ được mô-đun hoá và các
thành phần của nó có thể được dùng kết hợp với văn phạm SVG và văn
phạm XML khác để đạt được các hiệu ứng động.
3.18.2 Các thành phần ảnh động
3.18.2.1 Tổng quan
Các thành phần ảnh động của SVG được hợp tác phát triển với nhóm phát
triển SYMM (W3C Synchronized Multimedia Working Group – nhóm phát triển đa
phương tiện đồng bộ W3C), và các nhà phát triển SMIL 1.0 (Synchronized
Multimedia Integration Languge1.0 Specification – ngôn ngữ tích hợp đa phương
tiện không đồng bộ).
Nhóm phát triển SYMM hợp tác với nhóm phát triển SVG đã tạo ra bản đặc tả
ảnh động SMIL (SMIL Animation) cung cấp một tập tính năng năng ảnh động
XML cho mục đích chung. SVG kết hợp các tính năng động được định nghĩa trong
đặc tả SMIL Animation, đồng thời bổ sung một số mở rộng đặc trưng SVG.
3.18.2.2 Mối quan hệ của ảnh động SVG với SMIL Animation
SVG là một “ngôn ngữ chủ” (host language) của SMIL Animation. Do đó nó
có các ràng buộc và các tính năng bổ sung được cho phép bởi đặc tả SMIL
Animation. Ngoài các quy tắc đặc trưng SVG được đề cập tường minh trong phần
đặc tả này, còn có các định nghĩa chuẩn cho các thành phần ảnh động của SVG và
các thuộc tính nằm trong đặc tả SMIL Animation.
SVG hỗ trợ các thành phần ảnh động sau, được định nghĩa trong đặc tả SMIL
Animation:
• ‘animate’: cho phép các thuộc tính vô hướng nhận các giá trị khác
nhau theo thời gian.
Chương 3. Cấu trúc định dạng tập tin SVG
140
• ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc
chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính,
chẳng hạn như thuộc tính ‘visibility’.
• ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường.
• ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo
thời gian.
Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation:
• ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của
phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính
‘transform’.
• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ
liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành
phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú
pháp dữ liệu đường trong thuộc tính ‘path’).
• Thành phần ‘mpath’: SVG cho phép một thành phần
‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến
một thành phần ‘path’ để định nghĩa một đường di chuyển.
• Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành
phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc
độ của ảnh động trên đường di chuyển.
• Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần
‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho
trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến
của đường di chuyển.
Chương 3. Cấu trúc định dạng tập tin SVG
141
Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếu
URI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt
ảnh.
SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho
“thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu”
(document end). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và
đôi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tài
liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian
ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kết
thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải
phóng và không còn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thành
phần ‘svg’ được lồng trong một tài liệu SVG sẽ không tạo thành phân đoạn tài liệu
trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cả
các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cách
tương đối với thời gian tài liệu của thành phần ‘svg’ gốc.
Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị
trí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phân
đoạn tài liệu được cho.
3.18.3 Ví dụ ảnh động:
Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển
(motion path). <?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="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Example animMotion01 - demonstrate motion animation computations</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- Draw the outline of the motion path in blue, along
Chương 3. Cấu trúc định dạng tập tin SVG
142
with three small circles at the start, middle and end. --> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- Define the motion path animation --> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg>
Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s:
3.19 Viết script (kịch bản)
3.19.1 Chỉ định ngôn ngữ viết script
3.19.1.1 Chỉ định ngôn ngữ viết script mặc định
Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viết
script mặc định cho phân đoạn tài liệu cho trước.
• contentScriptType = “content-type”
Hình 3.37. Minh họa thành phần ảnh động animateMotion
Chương 3. Cấu trúc định dạng tập tin SVG
143
Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước.
Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các
“chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị
content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc
định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript”
chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị
này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được
đăng kí.
3.19.1.2 Khai báo cục bộ ngôn ngữ viết script
Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng
biệt bằng thuộc tính ‘type’ trên thành phần ‘script’.
3.19.2 Thành phần ‘script’
Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đánh
dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngôn ngữ ECMAScript). Bất
kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều có phạm vi toàn cục cho
toàn bộ tài liệu hiện tại. Bằng cách kết hợp ngôn ngữ ECMAScript và SVG DOM,
chúng ta có thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xóa
các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG có
thể tương tác với người dùng.
Ví dụ 1:
Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự
kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình tròn, hình tròn thay
đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa
kết quả sau khi nhấp chuột lên hình trò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="6cm" height="5cm" viewBox="0 0 600 500"
Chương 3. Cấu trúc định dạng tập tin SVG
144
xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event </desc> <!-- ECMAScript to change the radius with each click --> <script type="text/ecmascript"> <![CDATA[ function circle_click(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if (currentRadius == 100) circle.setAttribute("r", currentRadius*2); else circle.setAttribute("r", currentRadius*0.5); } ]]> </script> <!-- Outline the drawing area with a blue line --> <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/> <!-- Act on each click event --> <circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/> <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> Click on circle to change its size </text> </svg>
Kết quả trước và sau khi nhấp chuột lên hình tròn trên trình duyệt:
Một số thuộc tính của thành phần ‘script’:
• type= “content-type”
Hình 3.38. Minh họa chức năng bắt sự kiện chuột
Chương 3. Cấu trúc định dạng tập tin SVG
145
Chỉ định ngôn ngữ viết script cho thành phần ‘script’ được cho. Giá
trị content-type chỉ định một loại phương tiện.
Script có thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ
trên, hoặc cũng có thể nằm trong một tập tin script (*.js) được liên kết vào trong tài
liệu như sau:
Tập tin “createnode.js” chứa đoạn script sau:
function pinta() { var circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30); circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " + "fill: rgb(" + 255*Math.random() + "," + 255*Math.random() + "," + 255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi pinta() này một lần*/ document.getElementById("dr").appendChild(circleNode);}
Nội dung SVG tham chiếu tới tập tin SVG trên thông qua thuộc tính
‘xlink:href’ :
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd "> <svg width="300" height="300" onload="pinta()"> <script type="text/ecmascript" xlink:href="createnode.js"> </script> <g id="dr" /> </svg>
Chương 3. Cấu trúc định dạng tập tin SVG
146
Kết quả trên trình duyệt sau một thời gian:
Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’
3.19.3 Quản lý sự kiện
Các sự kiện chính là nguyên nhân kích hoạt script.
• Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload”
được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa
phần script sẽ được thực thi khi các sự kiện xảy ra.
• Bộ lắng nghe sự kiện (event listener), được mô tả trong “Document
Object Events” (sự kiện mô hình đối tượng tài liệu – DOM2-EVENTS),
được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự
kiện được cho) xảy ra trên đối tượng được cho.
3.19.4 Thuộc tính sự kiện
Các thuộc tính sự kiện có sẵn trên nhiều thành phần SVG.
Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật
chứa của ngôn ngữ SVG :
• onfocusin
Chương 3. Cấu trúc định dạng tập tin SVG
147
• onfocusout
• onactivate
• onclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onload
Các thuộc tính sự kiện cấp tài liệu:
• onunload
• onabort
• onerror
• onresize
• onscroll
• onzoom
Các thuộc tính sự kiện ảnh động :
• onbegin
• onend
• onrepeat
• onload
Chương 3. Cấu trúc định dạng tập tin SVG
148
3.19.5 ECMAScript và DOM
Phần này mô tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp
ECMAScript và DOM.
3.19.5.1 Lấy đối tượng tài liệu
function init(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; }
3.19.5.2 Lấy thành phần gốc
svgRoot = svgDocument.documentElement;
3.19.5.3 Tạo một node trong cây tài liệu
Hàm sau dùng để tạo một thành phần ‘circle’
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); }
Chương 3. Cấu trúc định dạng tập tin SVG
149
3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó
function RemoveTaget(parentElement,targetElement) { parentElement.removeChild(targetElement); };
3.19.5.5 Thiết lập thuộc tính sự kiện
<rect x="5" y="5" width="40" height="40" fill="red" onclick="changeColor(evt)"/>
function changeColor(evt) { var target = evt.target; target.setAttributeNS(null, "fill", "purple"); }
3.19.5.6 Thiết lập bộ lắng nghe sự kiện
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var rect = svgDocument.createElementNS(svgns, "rect"); rect.setAttributeNS(null, "x", 5); rect.setAttributeNS(null, "y", 5); rect.setAttributeNS(null, "width", 40); rect.setAttributeNS(null, "height", 40); rect.setAttributeNS(null, "fill", "green"); rect.addEventListener("click", changeColor,
Chương 3. Cấu trúc định dạng tập tin SVG
150
false); svgDocument.documentElement.appendChild(rect); }
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
151
Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
4.1 Các kĩ thuật và công nghệ
4.2 WMS
Theo đặc tả của tổ chức OGC (Open Geospatial Consortium), WMS (Web
Map Service) là một dịch vụ bản đồ Web . Nó phải có các khả năng sau:
1. Tạo bản đồ (là một ảnh , một chuỗi các thành phần ảnh, hay một tập gói
dữ liệu tính năng địa lý)
2. Đáp ứng được các yêu cầu căn bản đối với nội dung của bản đồ,
3. Có khả năng cung cấp thông tin cho các chương trình khác biết về các
loại bản đồ nó có thể tạo được và loại nào trong số đó có thể được truy
vấn sâu hơn.
Một WMS client là một ứng dụng hay một trình duyệt có thể gửi yêu cầu một
WMS server như sau:
1. Để tạo bản đồ, các tham số URL cần chỉ định trong câu truy vấn : khu
vực cần vẽ, hệ trục tọa độ được dùng, loại thông tin hiển thị, định dạng
trả về, kích thước trả về, kiểu hiển thị, và các tham số khác.
2. Để yêu cầu nội dung bản đồ, các tham số URL cần chỉ rõ bản đồ được
yêu cầu và vị trí được quan tâm trên bản đồ.
3. Đề yêu cầu về khả năng của WMS server, các tham số cần chỉ rõ phải
chứa loại yêu cầu “capabilities”.
Theo đặc tả WMS, một dịch vụ bản đồ web phải cài đặt các tác vụ sau:
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
152
1. GetCapabilities (bắt buộc phải có): cung cấp thông tin về khả năng của
WMS cho client.
2. GetMap (yêu cầu): cung cấp bản đồ địa lý phát sinh từ dữ liệu địa lý
theo yêu cầu của client.
3. GetFeatureInfo (tùy chọn): cung cấp thông tin một vị trí địa lý trên bản
đồ mà client yêu cầu.
4.3 WFS
Theo đặc tả của OGC, WMS cho phép một client có thể nạp đè hình ảnh từ
nhiều WMS trên Internet để hiển thị. Trong khi đó, WFS là một dịch vụ tính năng
web cho phép một client có thể truy xuất và cập nhật dữ liệu địa lý được mã hoá
bằng ngôn ngữ đánh dấu thông tin địa lý GML từ nhiều dịch vụ tính năng web
WFS. Để biết thêm về GML xin tham khảo đặc tả GML tại:
http://www.opengis.org/legal/ipr_faq.htm.
Hình 4.1. Mô hình kiến trúc giao tiếp giữa client và WFS.
Một WFS phải cài đặt các chức năng sau:
1. GetCapabilities : Mỗi WFS phải có khả năng mô tả các khả năng của
mình. Cụ thể, một WFS phải chỉ rõ được loại tính năng nó có thể cung
cấp và các tác vụ được hỗ trợ trên mỗi loại tính năng này.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
153
2. DescribleFeatureType: Mỗi WFS phải có khả năng mô tả cấu trúc của
mỗi loại tính năng mà nó có thể cung cấp.
3. GetFeature: Mỗi WFS phải có khả năng xử lý các yêu cầu truy xuất các
tính năng có thể kèm theo các ràng buộc được chỉ định trong câu truy
vấn từ phía client.
4. GetGmlObject (tùy chọn): Mỗi WFS có thể xử lý các yêu cầu truy xuất
các thành phần bằng cách lần theo các liên kết (Xlinks) tham chiếu tới
XML IDS của thành phần đó. Một client có thể chỉ định có các XLinks
được nhúng lồng trong dữ liệu thành phần nhận được từ WFS hay
không.
5. Transaction: Mỗi WFS có thể xử lý các yêu cầu tác vụ giao dịch. Một
yêu cầu giao dịch có thể có nhiều tác vụ, như các tác vụ tạo, cập nhật,
và xóa trên các tính năng địa lý.
6. LockFeature: Mỗi WFS có thể xử lý các yêu cầu khoá một hay nhiều
thể hiện của mỗi loại tính năng trong suốt quá trình giao dịch. Điều này
đảm bảo các giao dịch được thực hiện theo trình tự không gây xung đột,
sai lệch dữ liệu.
Dựa trên các khả năng một WFS có thể cung cấp, ba loại WFS được định
nghĩa như sau:
1. WFS căn bản (Basic WFS) : WFS này là một dịch vụ tính năng chỉ đọc,
được cài đặt các khả năng GetCapabilities, DescribeFeatureType và
GetFeature.
2. XLinkWFS : Ngoài các khả năng của WFS căn bản, loại WFS này còn
hỗ trợ khả năng GetGmlObject.
3. WFS giao dịch (Transaction WFS) : Ngoài khả năng của một WFS cơ
bản, nó phải cài đặt các tác vụ giao dịch và có thể có khả năng
GetGmlObject và LockFeature.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
154
4.4 GEOSERVER
Geoserver là một dịch vụ web viết bằng Java được xây dựng dựa trên đặc tả
WFS và WMS do OGC đưa ra. Geoserver là một chương trình mã nguồn mở dưới
giấy phép của GPL 2.0. Nó là sản phẩm được tạo bởi một đội ngũ toàn cầu các tổ
chức và nhà phát triển tự do. Geoserver là một WFS giao dịch. Nó có tất cả các khả
năng GetCapabilities, DescribeFeatures, GetFeatures, Transaction. Hiện tại đã có
Geoserver-1.3. Mỗi phiên bản của Geoserver có hai bộ để cài đặt, một là tập tin
.WAR và một là tập tin .EXE. Để có thể chạy được Geoserver cần phải cài bộ
JDK1.4 (java virtualmachine) . Trong phạm vi chương trình ứng chúng em sử dụng
Geosever-1.3.exe.
Có một đặc điểm mới của Geoserver là phát sinh bản đồ SVG nhưng chưa có
định kiểu. Dữ liệu thông tin địa lý được sử dụng cho Geoserver lấy từ ShapeFile,
Oracle Spatial, ArcSDE. Geoserver được xây dựng trên thiết kế phân tầng như sau
sơ đồ sau:
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
155
Hình 4.2. Sơ đồ phân tầng của GeoServer
4.5 Kiến trúc ứng dụng
Chương trình bản đồ điện tử thành phố và hỗ trợ tìm đường đi được xây dựng
theo kiến trúc client-server. Cho phép người dùng xem bản đồ một cách mềm dẻo
và tiện lợi, cho phép người có thể phóng to thu nhỏ bản đồ, cho phép người dùng
tìm đường đi ngắn nhất và tra cứu thông tin đường đi.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
156
Hình 4.3. Sơ đồ kiến trúc ứng dụng
4.6 Client-side
Client là nơi dùng để hiển thị, giao tiếp, và tương tác với người dùng. Bằng
các đoạn script, client có thể nhận và xử lý một số tương tác ngay tại client như thao
tác chọn vùng bản đồ quan tâm, chọn điểm đầu, điểm cuối khi tìm đường đi được
tính toán và kiểm tra giá trị trước khi yêu cầu server xử lý sẽ làm thiểu bớt những
xử lý không cần thiết phải làm phiền đến server.
Client là nơi hiển thị bản đồ, bản đồ là một nội dung SVG nên cần phải có
chương trình plug-in để hiển thị, đó là SVGViewer.
4.7 Server- side
Server là nơi nhận và xử lý các yêu cầu của client. Các yêu cầu đó là : getMap
(lấy bản đồ) theo một số ràng buộc về vùng bản đồ cần lấy, số tính năng cần lấy…,
và getBestPath (tìm đường đi ngắn nhất)….Server sử dụng dịch vụ của GeoServer
để tạo bản đồ và tra cứu thông tin của đối tượng địa lý. Server không dùng bản đồ
SVG của GeoServer phát sinh vì nội dung SVG được phát sinh còn nghèo nàn về
cách trình diễn và tương tác với người dùng, Server sẽ nhận dữ liệu GML trả về của
Geoserver để tạo bản đồ SVG trả về cho Client. Để tìm đường đi ngắn nhất server
sử dụng dịch vụ tìm đường đi ngắn nhất để phận chia công việc với server tạo bản
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
157
đồ. Điều này sẽ làm cho công việc được sang sẻ và xử lý song song làm giảm được
thời gian đợi cho client. Dịch vụ tìm đường đi dùng dữ liệu topo để tìm đường đi
ngắn nhất vừa nhanh vừa dễ xây dựng.
Môi trường cài đặt server là Visual Studio.Net ngôn ngữ sử dụng là C#.
Client Service tìm đường
Bản đồ ASPX
Geoserver
Server RequestMap, Path
GMLRequesst
Hình 4.4. Kiến trúc client-server được cài đặt
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
158
4.8 Sơ đồ tương tác chi tiết giữa client và server
Client Service tìm đường
Bản đồ ASPX
Geoserver 1.3
Server
Yêu cầu một tập tin .svg
Tập tin SVG trả về
GMLRequesst
Yêu cầu tìm đường đi
Kết quả tìm đường
Nhú
ng v
ào
SQL SERVER
Tập tin hình học (shape file)
*.shp *.dbf
Hình 4.5. Kiến trúc chi tiết client-server được cài đặt
Tập tin MySQL
*.frm *.myd, *.myi
MySQL Server 4.1
Adobe SVG Viewer plugin
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
159
Phần sau đây sẽ mô tả chi tiết kiến trúc trong hình trên.
4.8.1 Mô tả chi tiết client
4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client
Client được cài đặt trong đề tài này là một trình duyệt. Trình duyệt Web này
được viết bằng trang ngôn ngữ HTML kết hợp với Javascript. Khi mở trang web
của ứng dụng lần đầu tiên trong một phiên làm việc trên máy tính, client sẽ gửi một
yêu cầu đến server để lấy bản đồ .svg. Khi đã nhận được tập tin .svg này từ server,
trang Web ở phía client sẽ tự động cập nhật nội dung tập tin .svg này vào trong cửa
sổ trình duyệt. Bộ hiển thị SVG (SVG Viewer) sẽ tự động xây dựng lại phần khung
trong chứa thẻ ‘svg’ cửa sổ trình duyệt.
Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client
4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client
SVG có một đặc tính là định dạng véc-tơ được thiết kế sao cho các thành phần
bên trong nội dung có thể tương tác trực tiếp với người sử dụng thông qua cây phân
cấp DOM (Document Object Model) (Mô hình đối tượng tài liệu). Phía client sẽ tận
dụng đặc tính này của SVG để đơn giản hóa việc xử lý thao tác. Mỗi thành phần sẽ
giao tiếp với người sử dụng. Khi người sử dụng nhấn chuột lên một thành phần
(chẳng hạn như một con đường) thì thành phần đó sẽ tự động phát sinh một sự kiện
và gửi lên nút trên cùng trong cây phân cấp DOM
Client http://169.254.131.98:port/GetSVG
Câu lệnh yêu cầu tập tin .svg
Server
Tập tin .svg
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
160
Hình 4.7 Cây DOM quản lý qui trình bắt sự kiện
Người dùng tương tác với thành phần này thông qua đoạn mã Javascript. Đoạn
thực thi tương ứng cho mỗi sự kiện có thể được nhúng nội tuyến vào trong tập tin
.svg, hoặc có thể được đặt trong một tập tin Javascript khác rồi tham chiếu đến tập
tin Javascript này từ trong tập tin .svg.
Vậy bằng cách thao tác với một điểm, một đường, hoặc một vùng, ta có thể
truy vấn thông tin mà thành đó chứa. Trong trường hợp của ứng dụng bản đồ thì đó
là thông tin về tọa độ, chiều dài, có bao nhiêu nhà trên đường đang tương tác.
Khi có những thông tin này, người lập trình có thể tìm đường đi từ một đỉnh
tới một đỉnh khác.
4.8.1.3 Tìm đường đi từ giữa hai điểm
Khi đã xác định được tọa độ hai điểm mà người dùng cần tìm đường đi giữa
chúng, client sẽ gửi câu lệnh yêu cầu server thực hiện việc tìm kiếm đường đi với
đỉnh đầu và đỉnh cuối là hai điểm trên. Yêu cầu được server nhận thông qua một
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
161
dịch vụ web (web service) chạy ở phía server. Sau khi việc tìm đường đã hoàn tất,
server thông báo lại kết quả cho client cũng thông qua cùng một web trên.
Client căn cứ vào kết quả trả về mà hiển thị thông tin trên bản đồ .svg. Thông
tin trả về là một tập các tọa độ kề nhau để đi từ điểm A đến điểm B, với A,B là hai
điểm đã được chọn để tìm kiếm đường đi.
4.8.1.4 Vấn đề thay đổi tỉ lệ phóng to thu nhỏ
Bộ hiển thị SVG đã hỗ trợ chức năng phóng to thu nhỏ. Người dùng có thể
phóng to đến mức tùy ý mà luôn an tâm rằng ảnh không bị vỡ.
(Ghi chú: Chức năng phóng to trong Adobe SVG Viewer là Ctrl+ kéo chuột)
Một cách khác là sử dụng tính năng của server WFS. Khi cần phóng to vùng
nào, người dùng chọn một đường bao ngoài của vùng đó. Server dữ liệu sẽ thực
hiên chức năng truy vấn đến vùng đó, chỉ chọn những tọa độ nằm trong vùng mong
muốn.
Ưu điểm của kiến trúc trên:
− Các xử lý truy vấn dữ liệu được thực hiện ngay bên phía client, không
cần phải chuyển về sever.
− Tốc độ đáp ứng tương tác nhanh hơn so với việc chuyển toàn bộ hàm
về server.
Khuyết điểm của kiến trúc trên:
− Do server nằm phân tán nên việc truy vấn dữ liệu mới từ server sẽ tốn
thời gian truyền tải tập tin .svg trên mạng.
− Kích thước tập tin .svg không được quá lớn vì nếu như thế sẽ làm cho
thời gian truyền tải và thời gian hiển thị nội dung SVG gia tăng.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
162
− Mỗi lần cần nội dung mới ở server giao diện thì phải chờ cho bộ hiển
thị SVG xây dựng xong hình ảnh trong tập tin .svg được trả về. Khi đó
người dùng phía client mới thấy được ảnh SVG.
4.8.2 Mô tả chi tiết server
Server gồm hai phần con là UIServer (viết tắt của User Interface Server, được
gọi là server giao diện) và DataServer (server chuyên chứa dữ liệu).
Trong kiến trúc ứng được trình bày ở hình phía trên, UIServer gồm hai phần
nhỏ nữa là “Bản đồ ASPX” và “Service tìm đường”. DataServer gồm hai phần con
là Geoserver và Microsoft SQL Server.
Sau đây là mô tả cho từng phần con:
4.8.2.1 Mô tả chi tiết “Bản đồ ASPX”
Server con này nhận yêu cầu truy vấn tập tin .svg. Sau đó gửi yêu cầu này
xuống cho Geoserver. Geoserver đóng vai trò là một server dữ liệu, chuyên cung
cấp dữ liệu dạng .gml. Sau đó sever “Bản đồ ASPX” sẽ chuyển đổi dữ liệu này sang
định dạng .svg.
Để viết được server con này, người phát triển phải hiểu cú pháp của GML và
SVG, chẳng hạn như chuyển một “LineString(10,10 14,234)” từ GML sang “line x1
= 10, y1=10 x2=14 y2=234 stroke-width = 1” trong định dạng SVG.
Câu lệnh yêu cầu tập tin .svg Client
Server
Tập tin .svg
“Bản đồ ASPX”
Geoserver Hình 4.8. Mô tả chức năng server “Bản đồ ASPX”
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
163
4.8.2.2 Mô tả “Service tìm đường”
Chức năng của “Service tìm đường” là tìm đường đi giữa hai điểm được phía
client yêu cầu. Server con này sẽ truy vấn trên cơ sở dữ liệu (CSDL) trong
Microsoft SQL Server để lấy thông tin cần thiết cho việc tìm đường. Mô tả chi tiết
của cấu trúc bảng trong SQL Server sẽ được mô tả ở mục 4.4.2.4
Hình 4.9. Mô tả server “Service tìm đường”
4.8.2.3 Mô tả Geoserver
Hình 4.10. Mô tả Geoserver
dinhDau, toaDo1, dinhCuoi, toaDo2
Câu lệnh yêu cầu tìm đường
Client
Server
Kết quả: Danh sách các tọa độ
“Service tìm
đường”
MS SQL Server
Tập tin hình học (shape file)
*.frm *.myd, *.myi
MySQL Server 4.1
Geoserver 1.3
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
164
Geoserver đóng vai trò là server chuyên cung cấp dữ liệu. Ứng dụng sử dụng
bốn lớp dữ liệu là: đường, bách hóa tổng hợp, bệnh viện, trường học. Trong các lớp
trên, lớp đường được lấy từ dữ liệu của MySQL. Các lớp còn lại được lấy từ
shapefile.
Hiện nay ứng dụng sử dụng hai nguồn dữ liệu là shape file và MySQL. Đối
với shape file thì chỉ cần nạp tập tin .shp vào. Đối với MySQL thì phải nạp tập tin
dữ liệu vào MySQL, sau đó kết nối MySQL với Geoserver.
Hình 4.11. Kết xuất của Geoserver
Các tập tin dữ liệu .gml được Geoserver phát sinh sẽ được server “Bản đồ
ASPX” chuyển sang tập tin .svg.
Ứng dụng sử dụng phương thức HTTP POST và tác vụ GetFeatureType.
4.8.2.3.1 Phương thức HTTP POST Sử dụng phương thức HTTP POST sẽ yêu cầu client chuyển các yêu cầu trong
phần thân tài liệu POST vào trong dòng URL. Khi này WFS không bao giờ được
phép yêu cầu thêm bất cứ tham số phụ nào để bổ sung vào cuối dòng URL nhằm
mục đích xây dựng một kết quả hợp lệ cho yêu cầu tác vụ.
Geoserver hỗ trợ cả hai phương thức HTTP GET và HTTP POST. Sử dụng
phương thức nào cũng cho kết quả như nhau. Tuy nhiên, ứng dụng có sử dụng gói
Geoserver 1.3 Tập tin GML Bản đồ ASPX
Chuyển đổi dữ liệu sang SVG
Tập tin SVG
Client
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
165
CarbonTools giao tiếp với Geoserver, mà một lớp trong công cụ này (lớp
HandlerWFS) chỉ hỗ trợ phương thức HTTP POST. Do đó, luận văn sử dụng
phương thức HTTP POST để cài đặt. Từ đó, phần báo cáo chỉ đề cập HTTP POST,
còn phần mô tả chi tiết nằm ngoài phạm vi nghiên cứu. (xin xem thêm tập tin “04-
094_Web_Feature_Service_Implementation_Specification_V1[1].1.pdf”, phần
HTTP POST trong thư mục Ref\ThamKhaoChinh\GIS)
4.8.2.3.2 Tác vụ GetFeatureType Tác vụ GetFeature cho phép nhận về các tính năng từ một WFS. Một yêu cầu
GetFeature được xử lý bởi một WFS. Khi giá trị của thuộc tính outputFormat được
thiết lập là text/gml; subtype=gml/3.1.1, một tài liệu GML chứa kết quả sẽ được trả
về cho trình khách (client).
Nếu một WFS cài đặt “Xlink traversal” (tạm dịch là bộ phân tích liên kết), thì
một WFS client có thể dùng thuộc tính traverseXlinkDepth và traverseXlinkExpiry
để yêu cầu các thành phần được định danh bằng một liên kết.
Yêu cầu: (Request)
Mã hóa dạng XML của một yêu cầu GetFeature được định nghĩa theo giản đồ
phân đoạn XML sau:
<xsd:element name="GetFeature" type="wfs:GetFeatureType"/> <xsd:complexType name="GetFeatureType"> <xsd:complexContent> <xsd:extension base="wfs:BaseRequestType"> <xsd:sequence> <xsd:element ref="wfs:Query" maxOccurs="unbounded"/> </xsd:sequence> <xsd:attribute name="resultType" type="wfs:ResultTypeType" use="optional" default="results"/> <xsd:attribute name="outputFormat" type="xsd:string" use="optional" default="text/xml; subtype=3.1.1"/> <xsd:attribute name="maxFeatures" type="xsd:positiveInteger" use="optional"/>
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
166
<xsd:attribute name="traverseXlinkDepth" type="xsd:string" use="optional"/> <xsd:attribute name="traverseXlinkExpiry" type="xsd:positiveInteger" use="optional"/> </xsd:extension> </xsd:complexContent> </xsd:complexType> <xsd:simpleType name="ResultTypeType"> <xsd:restriction base="xsd:string"> <xsd:enumeration value="results"/> <xsd:enumeration value="hits"/> </xsd:restriction> </xsd:simpleType> <xsd:element name="Query" type="wfs:QueryType"/> <xsd:complexType name="QueryType"> <xsd:sequence> <xsd:choice minOccurs="0" maxOccurs="unbounded"> <xsd:element ref="wfs:PropertyName"/> <xsd:element ref="ogc:Function"/> </xsd:choice> <xsd:element ref="ogc:Filter" minOccurs="0" maxOccurs="1"/> <xsd:element ref="ogc:SortBy" minOccurs="0" maxOccurs="1"/> </xsd:sequence> <xsd:attribute name="handle" type="xsd:string" use="optional"/> <xsd:attribute name="typeName" type="wfs:TypeNameListType" use="required"/> <xsd:attribute name="featureVersion" type="xsd:string" use="optional"/> <xsd:attribute name="srsName" type="xsd:anyURI" use="optional"/> </xsd:complexType> <xsd:simpleType name="Base_TypeNameListType"> <xsd:list itemType="QName"/> </xsd:simpleType> <xsd:simpleType name="TypeNameListType"> <xsd:restriction base="wfs:Base_TypeNameListType"> <xsd:pattern value="((\w:)?\w(=\w)?){1,}"/> </xsd:restriction> </xsd:simpleType>
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
167
4.8.2.3.3 CarbonTools: công cụ hỗ trợ kèm theo Geoserver CarbonTools là một công cụ phát triển phần mềm được thiết kế dành riêng cho
nhà phát triển và phân tích thông tin địa lý. Công cụ này đóng gói các giải pháp
tương tác thuộc về không gian địa lý như các đặc tả của OGC (Open Geospatial
Consortium). CarbonTools là một sản phẩm của nhiều năm kinh nghiệm, công cụ
này giải quyết nhiều vấn đề và đưa ra một giao diện lập trình ứng dụng (API).
Gói CarbonTools được thiết kế cho phép mở rộng. Thư viện cốt lõi cung cấp
một nền mở cho phép mở rộng hỗ trợ cho các nguồn dữ liệu không gian địa lý mới,
các bộ quản lý dịch vụ và nhiều kĩ thuật trực quan mới, …. Hơn thế nữa, một lượng
lớn các giải pháp có thể được cung cấp khi sử dụng CarbonTools: các ứng dụng
desktop độc lập, các mở rộng phần mềm của phía thứ ba, các dịch vụ Web .Net và
nhiều hơn thế nữa.
Các công cụ CarbonTools .Net, kèm theo bộ cung cụ này, cung cấp một mở
rộng cho các công cụ .Net Form. Điều này làm cho các tác vụ WMS/WFS/GML
phức tạp có thể được thực hiện bằng cách kéo thả các thành phần vào Form. Các
điều khiển này cung cấp một khởi điểm tốt để phát triển các ứng dụng thỏa OGC.
Để giúp đỡ nhà phát triển, một số tiện ích được kèm theo gói này cùng với mã
nguồn đầy đủ. Trong số đó là CarbonViewer, một bộ hiển thị WMS/WFS/GML độc
lập.
CarbonTools gồm có 9 gói riêng rẽ:
• CarbonTools.Controls : Chứa các điều khiển hỗ trợ lập trình giao diện
• CarbonTools.Core.Base : Chứa các lớp cơ sở.
• CarbonTools.Core.Drawing : Chứa các lớp hỗ trợ vẽ hình.
• CarbonTools.Core.Features : Chứa các lớp dùng cho quản lý dữ liệu địa lý
…
• CarbonTools.Core.Geometries: Chứa các lớp về đối tượng hình học như
đường thẳng, đa giác….
• CarbonTools.Core.GML : Chứa các lớp phân tích tài liệu GML
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
168
• CarbonTools.Core.OGCCapabilities : Chứa các lớp hỗ trợ phân tích khả
năng của một WFS hay WMS.
• CarbonTools.Core.WFS : Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cầu
WFS tới WFS server.
• CarbonTools.Core.WMS: Chứa các lớp hỗ trợ giao tiếp, gởi các yêu cấu
WMS tới WFS server
Trong các gói trên, gói được sử dụng chính trong chương trình phát sinh bản
đồ SVG là CarbonTools.Core.WFS, các lớp trong gói này là:
Class Description
HandlerWFS Quản lý tương tác với một WFS thỏa đặc
tả của OGC
QueryBuilder Chuyển dữ liệu nguồn (SourceWFS)
thành một câu truy vấn dịch vụ thỏa đặc
tả WFS của OGC
SourceWFS Quản lý dữ liệu truy cập và truy vấn đối
với một dịch vụ WFS thỏa đặc tả WFS
của OGC. Dữ liệu quản lý bao gồm :
• Address (Một dịnh danh tài
nguyên cho dịch vụ)
• BBox (Đường bao của vùng địa
lý)
• FilterProperty (Tên thuộc tính
chứa hình học mà đường bao sẽ
được áp dụng)
• Format (Định dạng GML được
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
169
Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
Id Số nguyên 4 không Name Chuỗi 255 Có daiLo Số nguyên 4 Có
yêu cầu)
• Layers (các lớp dữ liệu)
• Maxfeature (Số tính năng tối đa
cần lấy) ….
WFSLayerType Kiểu và tên lớp được dùng trong câu truy
vấn
Ta sẽ dùng SourceWFS để lưu trữ các thông tin về một yêu cầu GetFeature.
Đồng thời dùng HandlerWFS để gửi yêu cầu đi và nhận dữ liệu trả về từ WFS
server, sau đó xử lý và tạo nội dung SVG .
4.8.2.4 Mô tả Microsoft SQL Server
Microsoft SQL Server là server chuyên cung cấp dữ liệu cho việc tìm kiếm
đường đi. Trong SQL Server, các bảng sau được sử dụng:
• MapNetworkWithLength
• MapNetworkDanhSachNodeKe
• MapNetworkArc_AutoWithDirection
Sau đây là mô tả cho từng bảng trên:
• Bảng MapNetworkWithLength
Bảng 4.1. Bảng MapNetworkWithLength Trong đó:
o Id : mô tả số nguyên định dang cho một đường trong thực tế
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
170
o Name : tên của đường
o daiLo : (nhận giá trị 0 hoặc 1). Nếu là 0 thì không phải là đại lộ. Nếu là 1
thì đó là đại lộ.
• Bảng MapNetworkArc_AutoWithDirection
Bảng 4.2. Bảng MapNetworkArc_AutoWithDirection Trong đó:
o Id : chính là chiều dài một đoạn tối tiểu
o Path : khóa ngoại tham chiếu đến khóa chính trong bảng
MapNetworkWithLength
o nodeStart : đỉnh bắt đầu của đoạn tối tiểu
o nodeEnd : đỉnh kết thúc của đoạn tối tiểu
o arc : danh sách mô tả tọa độ trong thực tế của đoạn tối tiểu
o direction: (nhận -1, 0 , 1). Nếu là 0 thì đi được cả hai chiều. Nếu là +1 thì
chỉ đi được từ nodeStart đến nodeEnd. Nếu là -1 thì chỉ đi được từ
nodeEnd đến nodeStart.
• Bảng MapNetworkDanhSachNodeKe
Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
id Số nguyên 4 không Path Số nguyên 4 Có nodeStart Số nguyên 4 Có nodeEnd Số nguyên 4 Có Arc Chuỗi 65536 Có Direction Số nguyên 2 Có
Tên cột Kiểu dữ liệu Chiều dài Cho phép rỗng
id Số nguyên 4 không DanhSachNodeKe Chuỗi 4 Có
Bảng 4.3. Bảng MapNetworkDanhSachNodeKe
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
171
Trong đó:
o Id : chính là chiều dài một đoạn tối tiểu
o DanhSachNodeKe: danh sách những node kề với node có mã số là id.
4.8.3 Mô tả chi tiết quá trình tìm kiếm đường đi
Quá trình tìm kiếm đường đi được thực hiện bằng thuật toán Dijkstra. Sau đây
là mô tả thuật toán Dijkstra.
Gọi đỉnh bắt đầu là s0, đỉnh kết thúc là t0.
Thuật toán sử dụng các mảng sau:
o doDai : kích thước n phần tử (với n là số đỉnh (số node) trong đồ thị).
Phần tử thứ i của mảng này lưu chiều dài từ đỉnh bắt đầu s0 đến đỉnh i.
o daDuyet : kích thước n phần tử. Phần tử thứ i của mảng này xác định
nút thứ i đã được duyệt hay chưa. Nếu giá trị này là true thì có nghĩa là
đã duyệt rồi. Nếu giá trị này là false thì có nghĩa là chưa duyệt
o truoc : kích thước n phần tử. Phần tử thứ i của mảng này xác định nút
trước nút thứ i là nút nào. Mảng này dùng để xác định đường đi.
Goi tập S là tập các đỉnh đóng. Đỉnh đóng là đỉnh mà hiện nay đã duyệt qua.
Gọi tập T là tập các đỉnh mở, tức chưa xét
• Bước 1: gán S= {s0}, T = T \ {s0}
u = s0;
• Bước 2: tìm đỉnh mở v có sao cho doDai[v] giá trị nhỏ nhất. Nếu v
trùng u thì có nghĩa là đã tìm được đường đi. Khi này chuyển sang
bước 4. Nếu không thì chuyển sang bước 3.
Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG
172
• Bước 3: cập nhật giá trị doDai, daDuyet từ đỉnh v. Xét các đỉnh kề v.
Nếu doDai[v] chưa có (tức nhận giá trị VO_CUC) thì cập nhật bằng
doDai[u] + chieuDai[u,v].
Nếu doDai[v] có rồi thì chỉ cập nhật nếu doDai[u] + chieuDai[u,v] <
doDai[v].
Nếu có cập nhật giá trị doDai[v] thì cần phải cập nhật lại giá trị của
truoc[v] = u.
Lặp lại bước 2.
• Bước 4: Truy tìm đường đi dựa vào mảng truoc. Quy tắc truy tìm như
sau
o Bước 4.1: Gán u = t0. Đưa t0 vào danh sách đường đi.
o Bước 4.2: Với mỗi đỉnh u hiện có, ta gán v = truoc[u]. Nếu v ==
VO_CUC thì dừng lại. Ngược lại, đưa v vào danh sách đường đi,
gán u=v, rồi lặp lại bước 4.2.
Chương 5. TỔNG KẾT
173
Chương 5 TỔNG KẾT
5.1 Kết luận
Sau thời gian nghiên cứu, chúng em đã tìm hiểu được cấu trúc tập tin ảnh véc-
tơ SVG, kĩ thuật viết script và các kĩ thuật liên quan để xây dựng được:
• Một server phát sinh bản đồ thành phố với bốn lớp đường, trường học cấp
ba, bệnh viện, bách hóa tổng hợp bằng SVG có định kiểu.
• Một service tìm đường đi ngắn nhất.
• Bản đồ SVG phát sinh có khả năng tương tác phía người dùng.
• Một ứng dụng phía trình khách có thể dùng để duyệt bản đồ SVG có sẵn
được phát sinh bởi server trên, có khả năng tự chú thích các đối tượng khi
đưa chuột lướt qua các đối tượng đó.
5.2 Hướng phát triển:
Trong tương lai chúng em sẽ tiếp tục nghiên về chuẩn ảnh véc-tơ SVG để hoàn
thiện chương trình tìm đường đi ngắn nhất trên bản đồ thành phố, bao gồm việc
kiểm soát độ phóng to, thu nhỏ bản đồ bằng sự kết hợp với server phát sinh bản đồ
động theo theo kích thước trình khách yêu cầu, và tìm đường đi ngắn nhất.
Phụ lục A
174
Phụ lục A Mô tả bổ sung cho các định dạng véc-tơ
1. SVF
Tổng quan về ba phần trong cấu trúc của tập tin SVF
Tập tin được khởi đầu bằng đoạn văn bản mô tả tập tin hiện tại là tập tin dạng
SVF, đồng thời cũng liệt kê mã số phiên bản của định dạng SVF được sử dụng.
Trong ví dụ sau, đoạn mã được liệt kê có chức năng thiết lập phần giới thiệu. Sau đó
nó sẽ đóng tập tin khi tập tin được hoàn tất.
Để vẽ ảnh, SVF cung cấp từng lệnh riêng biệt ứng với mỗi đường cơ bản.
Chẳng hạn, để vẽ đường thẳng, cần hai lệnh SVFOutputMoveTo và
SVFOutputLineTo. Hai lệnh này được đặt trong tập tin SVF. Bộ hiển thị SVF (còn
gọi là SVF Viewer) sẽ đọc từng lệnh và thực hiện công việc hiển thị.
Ví dụ:
Đoạn mã sau vẽ một đường thẳng từ tọa độ (10,10) đến tọa độ (50,30).
Như vậy, để vẽ ảnh, người dùng chỉ cần dùng các lệnh cú pháp giống ngôn
ngữ lập trình C. Chỉ có một điểm khác là các lệnh này được đưa vào tập tin .svf. Sau
đó bộ hiển thị sẽ đọc các lệnh này rồi hiển thị.
Cú pháp cho SVF phiên bản 1.1
(Nguồn: www.softsource.com/svf/syntax.html)
FILE *fp = SVFOpen("name.svf");
...
SVFClose(fp);
SVFOutputMoveTo(fp,10,10);
SVFOutputLineTo(fp,50,30);
Phụ lục A
175
<identifier>identifier is a symbol which is defined elsewhere <identifier>identifier which hasn't been fully implemented yet Identifiera constant "string"a literal string [<identifier>]<identifier> is optional {<identifier>}<identifier> may appear 0 or more times <id1> + <id2><id1> followed directly by <id2> <id1> | <id2>either <id1> or <id2> <SVF file>= <intro> + <header> + <body> <intro>= "SVFv" + <version number> + NullTerminator <version number> = {"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "."} <header>= {<header item>} <body>= {<command>} <header item>= <name> | <extents> | <layer table> | <color table> | <background> | <transparent> | <notify table> | <imagewidth> | <transform> | <flags> <name>= Name + <null terminated string> <extents>= Extents + <xmin> + <ymin> + <xmax> + <ymax> <layer table>= LayerTable + <number of entries> + {<state> + <null terminated string>} <color table>= ColorTable + <number of entries> + {<red> + <green> + <blue>} <background>= Background + <color> <transparent>= Transparent + <color> <notify table>= NotifyTable + <number of zoomin entries> + <number of zoomout entries> + {<name> + <imagewidth>} + {<name> + <imagewidth>} <imagewidth>= Width + <millimeters> <transform>= Transform + <scale> + <basex> + <basey> <flags>= Flags + <flag> <command>= <point> | <moveto> | <lineto> | <polyline> | <relmoveto> | <rellineto> | <relpolyline> | <rectangle> | <circle> | <arc> | <bezier> | <text> | <text height> | <setcolor> | <setlayer> | <penwidth> | <fillmode> | <data> | <set1dlinkinfo> | <set2dlinkinfo> | <invisible> <point>= Point + <x> + <y> <moveto>= MoveTo + <x> + <y> <lineto>= LineTo + <x> + <y> <polyline>= Polyline + <number of points> + {<x> + <y>} <relmoveto>= RelMoveTo + <xoffset> + <yoffset> <rellineto>= RelLineTo + <xoffset> + <yoffset> <relpolyline>= RelPolyline + <number of points> + {<xoffset> + <yoffset>} <rectangle>= Rectangle + <width> + <height>
Phụ lục A
176
2. Flash
Các mục tiêu thiết kế dành cho SWF
SWF được thìết kế nhằm đáp ứng được các mục tiêu sau:
• Hiển thị trên màn hình − Là định dạng chính được dự định sử dụng
cho việc hiển thị trên màn hình, hỗ trợ chống răng cưa, hiển thị nhanh
một ảnh bitmap với bất kỳ dạng màu, hoạt ảnh và nút tương tác.
• Khả năng mở rộng − Định dạng này là được đánh dấu bằng các thẻ
(tag). Do đó nó có thể được phát triển thêm nhiều tính năng mới trong
khi vẫn đảm bảo khả năng tương thích ngược với những bộ hiển thị
Flash (Flash Player).
• Truyền tải mạng − Định dạng này có thể truyền tải thông tin qua một
mạng có băng thông bị giới hạn và độ rộng băng thông này không thể
được ước lượng trước. Các tập tin được nén lại để trở nên nhỏ hơn và
hỗ trợ xây dựng hình ảnh dần dần thông qua kỹ thuật luồng
(streaming). SWF là một định dạng nhị phân và người sử dụng không
thể đọc chúng dưới dạng văn bản như HTML. SWF sử dụng các kỹ
thuật chẳng hạn như nén bit và các cấu trúc có các trường tùy biến để
tối ưu hóa kích thước tập tin.
<circle>= Circle + <radius> <arc>= Arc + <radius> + <startangle> + <endangle> <bezier>= Bezier + <x> + <y> + <x> + <y> + <x> + <y> <text>= Text + <width> + <null terminated string> <text height>= TextHeight + <height> <setcolor>= SetColor + <color> <setlayer>= SetLayer + <layer> <penwidth>= SetPenWidth + <width> <fillmode>= FillMode + <fill> <data>= Data + <number of bytes> + {<byte>} <set1dlinkinfo>= 1dLink + <null terminated string> + <null terminated string> <set2dlinkinfo>= 2dLink + <null terminated string> + <null terminated string> <invisible>= Invisible <xmin/ymin/xmax/ymax> <x/y> <radius> <startangle> <endangle> <height> <width> <millimeters>
Phụ lục A
177
Trường Kiểu Chú thích Chứng thực UI8 Byte chứng thực thứ 1 – luôn là 'F' Chứng thực UI8 Byte chứng thực thứ 2 – luôn là 'W' Chứng thực UI8 Byte chứng thực thứ 3 – luôn là 'S' Phiên bản UI8 Byte mô tả phiên bản Chiều dài tập tin UI32 Chiều dài của cả tập tin. Kích thước khung hình RECT Kích thước khung (đơn vị là TWIPS) Tốc độ khung hình UI16 Tốc độ khung hình một giây Số lượng khung hình UI16 Tổng số khung hình của phim
• Tính ngầm định − Định dạng này đơn giản nên bộ hiển thị Flash nhỏ
và dễ dàng được nhúng vào các ứng dụng. Bộ hiển thị Flash chỉ phụ
thuộc vào một tập lệnh rất nhỏ của hệ điều hành. Do đó nó có khả
năng lớn để chạy trên nhiều hệ nền khác nhau.
• Độc lập tập tin − Các tập tin được hiển thị mà không có sự phụ thuộc
nào với các tài nguyên bên ngoài, chẳng hạn như phông chữ.
• Tính khả co − Các tập tin làm việc tốt trên các phần cứng yếu, và có
thể tận dụng được ưu điểm của phần cứng mạnh. Điều này thực sự
quan trọng vì các máy tính có độ phân giải màn hình và độ sâu của bit
màu (bit depths) khác nhau.
• Tốc độ − Bộ hiển thị xây dựng hình ảnh với chất lượng cao từ các tập
tin rất nhanh.
Cấu trúc của tập tin Flash
Các tập tin SWF có phần mở rộng là .swf và một kiểu MIME là application/x-
shockwave-flash. Các tập tin SWF là các tập tin nhị phân được chứa dạng các byte
độ dài 8 bit. Phần đầu của tập tin chứa một khối header có cấu trúc như sau:
Bảng A1. Cấu trúc tập tin Flash
Ghi chú:
• UI8 = unsigned integer 8 = số nguyên không dấu độ dài 8 bit
• UI16 = unsigned integer 16 = số nguyên không dấu độ dài 16 bit
• UI32 = unsigned integer 32 = số nguyên không dấu độ dài 32 bit
Phụ lục A
178
Tiếp theo header là một dãy các khối dữ liệu được đánh thẻ. Mỗi khối dữ liệu
có một kiểu thẻ (stag) và một chiều dài. Có hai dạng mô tả khối dữ liệu này: dạng
ngắn và dạng dài.
Tối ưu hóa kích thước tập tin SWF
Vì các tập tin SWF thường được phân phối qua kết nối mạng nên thật sự chúng
cần phải càng nhỏ càng tốt. Sau đây là một vài kỹ thuật được sử dụng để giải quyết
vấn đề này:
• Tái sử dụng − Cấu trúc của từ điển kí tự làm cho việc tái sử dụng các
thành phần trong một tập tin trở nên dễ dàng.
• Nén − Nội dung của các thẻ được nén lại. SWF hỗ trợ rất nhiều kỹ
thuật nén. Các ảnh bitmap có thể được nén lại bằng thuật toán nén
JPEG hoặc PNG zlib. Âm thanh được nén lại ở nhiều mức độ khác
nhau của thuật toán nén ADPCM. Các vật thể hình học được nén lại
bằng cách sử dụng một giản đồ mã hóa delta rất hiệu quả.
• Nén bit − Bất cứ khi nào có thể, các số được nén lại tới một số lượng
bit ít nhất có thể có để biểu diễn một giá trị. Các tọa độ thường được sử
dụng bằng cách dùng các trường bit có kích thước biến động, trong đó
một vài bit được sử dụng để xác định các giá trị theo sau cần bao nhiêu
bit để biểu diễn.
• Các giá trị mặc định − Một vài cấu trúc tương tự ma trận và các phép
biến đổi màu được có các trường thông dụng được sử dụng thường
xuyên hơn các giá trị. Ví dụ, đối với một ma trận thì trường được sử
dụng thường xuyên nhất là trường tịnh tiến. Phép co giãn và xoay ít
thông dụng hơn. Do đó nếu trường co giãn không có giá trị, nó được
cho giá trị là 100%. Nếu trường xoay không có giá trị, Flash coi như
không có phép xoay. Việc sử dụng các giá trị mặc định giúp tối thiểu
hóa kích thước tập tin.
Phụ lục A
179
• Thay đổi cách mã hóa − theo quy ước, các tập tin SWF chỉ chứa các
thay đổi giữa các trạng thái.
• Cấu trúc dữ liệu hình học − Cấu trúc dữ liệu hình học sử dụng một
cấu trúc để cực tiểu hóa kích thước của các vật thể hình học và để xây
dựng các vật thể hình học được khử răng cưa rất hiệu quả trên màn
hình. Các thành phần riêng biệt của một tập tin SWF được nén lại,
nhưng không có phép nén nào được thực hiện trên toàn bộ tập tin. Các
thành phần của tập tin chẳng hạn như các ảnh bitmap, các vật thể hình
học và âm thanh có thể được giải nén khi cần thiết.
Nội dung bên trong một tập tin SWF
Header tập tin trên cho biết nhiều thông tin. FWS xác định rằng đây là một tập
tin SWF; phiên bản của nó là 3.0. Kích thước tập tin là 741 byte. Độ rộng của phim
là 550 ảnh điểm; độ cao là 400 ảnh điểm. Tốc độ khung hình là 12 khung hình một
giây; có 10 khung hình trong đoạn phim này.
***** Dumping SWF File Information *****
----- Reading the file header -----
FWS
File version 3
File size 741
Movie width 550
Movie height 400
Frame rate 12
Frame count 10
----- Reading movie details -----
<----- dumping frame 0 file offset 21 ----->
Offset của khung hình 0 là 21.
tagLen 3: tagSetBackgroundColor RGB_HEX ffffff
Phụ lục A
180
Ý nghĩa: tagLen chỉ định chiều dài thực sự của thẻ trong trường hợp này là 3
byte (ffffff). tagSetBackgroundColor thiết lập màu nền là màu trắng
tagLen 2: tagDoAction
action code 7 stop
action code 0
Ý nghĩa: Dừng khung hình (hành động được thực hiện là Stop. Mã hành
động là 0 có nghĩa là không còn hành động nào cần được thực hiện.)
3. VRML
Một ví dụ về tập tin VRML:
Hình A.1. Ví dụ về ảnh VRML
Hình trên được phát sinh từ đoạn mã nguồn sau đây:
(Nguồn: http://www.vrml.org/Specifications/VRML97/part1/introduction.html) #VRML V2.0 utf8 Transform { children [ NavigationInfo { headlight FALSE } # We'll add our own light DirectionalLight { # First child direction 0 0 -1 # Light illuminating the scene } Transform { # Second child - a red sphere
Phụ lục A
181
translation 3 0 1 children [ Shape { geometry Sphere { radius 2.3 } appearance Appearance { material Material { diffuseColor 1 0 0 } # Red } } ] } Transform { # Third child - a blue box translation -2.4 .2 1 rotation 0 1 1 .9 children [ Shape { geometry Box {} appearance Appearance { material Material { diffuseColor 0 0 1 } # Blue } } ] } ] # end of children for world }
4. HGML
Sau đây là mô tả từng phần trong ba phần:
• Các đối tượng đồ họa cơ bản
• Chủ đề / sử dụng lại hình ảnh sẵn có
• Chỉnh sửa ảnh
1. Các đối tượng đồ họa cơ bản
Khái niệm này được đưa ra nhằm cho phép các ảnh được tải về và hiển thị trên
mạng không dây nhanh hơn so với cách sử dụng chuẩn HTML. Ý tưởng này nằm ở
chỗ giảm hoặc thay thế các ảnh bitmap lớn bằng các ảnh tương đương dựa trên đồ
họa véc-tơ. Các ảnh véc-tơ này được vẽ bằng cách sử dụng một tập hợp được định
nghĩa sẵn gồm các thẻ giống HTML liên quan đến các đối tượng đồ họa cơ bản. Các
đối tượng này gồm các cấu trúc hình học như đường thẳng, đường tròn, hình vuông,
Phụ lục A
182
đa giác, v.v… Sau đó các thành phần ảnh cơ bản này sẽ được vẽ độc lập với nhau
bằng cách sử dụng các thẻ lệnh, chẳng hạn như sau:
HGML cung cấp 18 thẻ sau, được chia thành ba nhóm ứng với ba danh mục
được thể hiện trong bảng sau:
Bảng A.2. Danh sách 18 thẻ của HGML Nhóm đầu tiên trong bảng trên gồm các thẻ dùng cho các chức năng vẽ cơ bản,
cho phép tạo một lượng các ảnh ghép đơn giản mà hiệu quả.
Ví dụ:
ARC
Vẽ một cung có độ rộng, chiều cao và góc được chỉ định so với gốc tọa
độ tuyệt đối.
<!ELEMENT ARC - O EMPTY>
<!ATTLIST ARC
Đối tượng đồ họa cơ bản Chủ đề ảnh Chỉnh sửa ảnh
ARC
ARROW
ELLIPSE
LINE
LINETO
LINEREL
LINK
ORIGIN
POLYGON
RECTANGLE
SETSTYLE
TEXT
CLIPART
THEME
COPY
FLIP
PASTE
ROTATE
<ellipse coords="0,0,50,30", style="dotted", color=orange, fill=yellow, psize="2">
Phụ lục A
183
coords %COORDS #BẮT BUỘC -- gồm tọa độ gốc x,y của of
cung, theo sau là độ rộng, độ cao, góc bắt đầu và góc của cung --
color %COLOR #NGẦM ĐỊNH -- màu sắc của
đường--
style %STYLE #NGẦM ĐỊNH -- kiểu của đường --
psize %PSIZE #NGẦM ĐỊNH -- độ dày của đường
-- >
<arc coords="20,20,50,30,45,80", color=red>
2. Chủ đề / sử dụng lại hình ảnh sẵn có
HGML cung cấp một số ảnh được vẽ trước để dùng trong nội dung một trang.
Các ảnh này dễ sử dụng hơn nhiều với các ảnh phải định nghĩa các đối tượng đồ họa
cơ bản.
Ví dụ:
CLIPART
Cho phép lấy một ảnh từ một nơi lưu trữ ngay trong máy tính và hiển thị lên ở
các tọa độ xác định.
<!ELEMENT CLIPART - O EMPTY>
<!ATTLIST CLIPART
name CDATA #BẮT BUỘC -- tên ảnh--
theme CDATA #NGẦM ĐỊNH -- kiểu của chủ đề--
coords %COORDS #BẮT BUỘC -- tọa độ góc trái-trên của ảnh--
width NUMBER #NGẦM ĐỊNH -- độ rộng của ảnh (đơn vị là ảnh điểm
(pixel)) --
height NUMBER #NGẦM ĐỊNH -- độ cao của ảnh (đơn vị là ảnh điểm
(pixel))--
href % URL #NGẦM ĐỊNH -- ảnh này đóng vai trò là một liên kết-->
<clipart name=ARROW1, coords="50,50", width=150, height = 5, href=
"http://www.demo.com/demo.hgm">
Phụ lục A
184
3. Chỉnh sửa ảnh
HGML cho phép chỉnh sửa ảnh bitmap ngay trên màn hình bằng cách sử dụng
các thẻ lệnh COPY, PASTE, FLIP and ROTATE. Những thẻ này được tạo ra nhằm
tối ưu hóa việc tạo các kiểu chính của ảnh. Ví dụ, nếu một ảnh ghép được tạo bằng
cách sử dụng một vài đối tượng đồ họa cơ bản thì điều này cũng được yêu cầu ở
những vị trí khác trên màn hình. Do đó, nó có thể được sao chép đến vị trí mới mà
không cần phải vẽ lại. Việc sao chép được thực hiện thông qua bộ nhớ đệm của màn
hình. Bộ hiển thị HGML sẽ đảm trách việc này.
Chức năng này cũng giúp tối ưu hóa việc lưu trữ các ảnh chủ đề. Ví dụ, thay vì
phải lưu trữ bốn ký hiệu mũi tên (sang trái, sang phải, lên, xuống), người sử dụng
chỉ cần lưu trữ một ảnh đơn trong cơ sở dữ liệu. Sau đó dùng các thẻ lệnh ROTATE
(phép xoay) và FLIP (di chuyển) để canh chỉnh chúng lại đúng vị trí.
Ví dụ:
COPY
Sao chép một phân đoạn màn hình (dạng hình chữ nhật) vào bộ nhớ đệm.
Ảnh sau khi sao chép hoàn toàn giống với ảnh gốc.
<!ELEMENT COPY - O EMPTY>
<!ATTLIST COPY
coords %COORDS #REQUIRED -- tọa độ góc trái-trên-phải-
dưới của phân đoạn màn hình-- >
<copy coords="50,50,100,100">
Phụ lục A
185
So sánh việc truyền tải đồ họa theo chuẩn HTML với truyền tải đồ họa theo
chuẩn HGML
(Nguồn: www.w3.org/TR/NOTE-HGML.htm)
Chú thích: * bao gồm thời gian truyền và hiển thị/ vẽ toàn bộ trang. Tốc độ vẽ
là 9600 bps (bits per second).
Ưu điểm của HGML
HGML, khi so sánh với các sử dụng đồ họa nội tuyến trong HTML, có các ưu
điểm chính như sau:
• Tối ưu hóa hiệu suất cho mạng không dây.
• Cửa sổ trình duyệt được xem như là một phông nền, cho phép phủ các
lớp thành phần hình ảnh và định vị tuyệt đối trên trang (nghĩa là hình ảnh sẽ
xuất hiện với “mối quan hệ chặt chẽ giữa các thành phần trong nó” khi thể
hiện ở bất kỳ kích thước nào; đồng thời ảnh được phép cuộn, nếu cần thiết,
bên trong một cửa sổ trình duyệt tùy ý ).
• Cung cấp các ảnh được định nghĩa sẵn nhằm giúp việc xây dựng trang
được đơn giản.
• Có thể được nhúng vào trong HTML hoặc được sử dụng độc lập.
(Nguồn: www.w3.org/TR/NOTE-HGML.htm)
5. DrawML
Các thành phần trong ngôn ngữ DrawML: DrawML là một ngôn ngữ đơn giản. Nó chỉ định nghĩa năm thành phần.
HTML HGML
Thông số của tập tin Tập tin HTML - 5KB
Ảnh GIF - 83KB
Tập tin HTML - 2KB
Tập tin HGML - 13KB
Thời gian truyền tải (qua
mạng GSM)* 1 minute 13 giây 18 giây
Phụ lục A
186
• Thành phần ‘drawml’: Một ảnh vẽ được thông báo đến một tài liệu
bằng thành phần này.
• Thành phần ‘shape’: một thành phần tổng quát chứa các thuộc tính
của nó bằng một lớp Java.
• Thành phần ‘line’: vẽ một đường thẳng giữa hai hoặc nhiều vị trí.
• Thành phần ‘pos’: định nghĩa một vị trí trong một đường thẳng.
• Thành phần ‘lmward’ (viết ngược lại của ‘drawml’): thành phần
chuyển đổi ngữ cảnh ngược lại vào các thành phần DTD cha.
Các khái niệm trong DrawML: Trong DrawML có các khái niệm sau:
• Nhúng
• Chỉnh kích thước tự động
• Định vị trí tự động
• Kết nối tự động
Sau đây là mô tả chi tiết cho từng khái niệm trên:
• Nhúng
Một ảnh DrawML được nhúng trong tài liệu SGML/XML. Trong DrawML,
người dùng có thể chèn các đoạn, các danh sách, hình ảnh, bảng biểu.
• Chỉnh kích thước tự động
DrawML có chức năng tự động chỉnh kích thước ảnh vẽ sao cho vừa khớp với
nội dung bên trong nó.
Ví dụ:
<drawml> <shape type="rectangle"></shape> <shape type="rectangle" width="100"> <lmward> <p>This is <em>my</em> text</p> </lmward> </shape>
Phụ lục A
187
Đoạn mã này cho hình sau:
• Định vị trí tự động
Bằng cách đặt các vật thể hình học bên trong các vật thể hình học khác,
DrawML có thể sắp thề sắp xếp và gom nhóm một cách thông minh. Vật thể hình
học cha có thể ẩn và do đó được sử dụng cho mục đích duy nhất là gom nhóm. Theo
mặc định, các vật thể hình học được sắp xếp theo chiều ngang.
Ví dụ:
Kích thước ban đầu của hình chữ nhật (ứng với width=100)
Kích thước hình chữ nhật sau được thay đổi tự động (để chứa được đoạn văn bản)
<drawml> <shape type="rectangle"> <shape type="rectangle"> <lmward>Hello</lmward> </shape> <shape type="rectangle"> <lmward>new</lmward> </shape> <shape type="rectangle"> <lmward>World</lmward> </shape>
</shape>
Phụ lục A
188
Đoạn mã này cho hình sau:
• Kết nối tự động
Các đối tượng trong DrawML có thể kết nối với nhau, chẳng hạn như các đối
tượng trong một cây phân cấp sau:
Tất cả các đối tượng trong DrawML đều được biểu diễn bằng Java. Việc sử
dụng sức mạnh của ngôn ngữ lập trình hướng đối tượng như Java mang lại cho nhà
phát triển khả năng linh động. Mỗi đối tượng được xem là một thể hiện của một lớp.
Việc hiển thị các đối tượng chính là một lời gọi đến phương thức hiển thị của đối
tượng đó.
Phụ lục A
189
Ví dụ: Đoạn mã này biểu diễn hình sau:
public void DrawShape() { Painter.NewPath(); // Clear painter Painter.MoveTo( 0, 10 ); Painter.LineTo( MyW()/2, 0 ); Painter.LineTo( MyW(), 10 ); Painter.ClosePath(); Painter.Stroke(); // Draw roof Painter.NewPath(); Painter.MoveTo( 7, 10 ); Painter.LineTo( MyW() - 7, 10 ); Painter.LineTo( MyW() - 7, MyH() ); Painter.LineTo( 7, MyH() ); Painter.ClosePath();
Painter Stroke(); // Draw front
Phụ lục B
190
Phụ lục B Kết quả cài đặt
Để chạy được server phát sinh bản đồ cần: cài đặt jdk1.4.2, cài đặt
Geoserver1.3 và thêm dữ liệu bản đồ thành phố vào Geoserver, cài đặt MySQL và
thêm dữ liệu đường đi, cài đặt SQL server và thêm dữ liệu tên đường vào vì hiện tại
server phát sinh bản đồ SVG dựa vào: tài liệu GML trả về từ Geoserver mà
Geoserver lại sử dụng dữ liệu đường đi từ MySQL server, và kết hợp với dữ liệu tên
đường đi từ SQL server.
Chép tòan bộ chương trình GenerateSVGMap vào Inetpub\wwwroot\ sau đó
trên trình duyệt gõ câu truy vấn sau vào textbox nhập URL:
http://localhost/GenerateSVGMap/BanDoPhatSinh.aspx?serveraddress=http://l
ocalhost:8080/geoserver/wfs?&bbox=16.829529,0,13184.242787,10755.848151&fi
lterproperty=&layers=topp:Truongcap3,topp:benhvien3,topp:mapnetwoarc_auto&m
axfeatures=&version=&crs=&method=&format=GML2&width=700&height=571.0
7&
Bản đồ phát sinh sẽ như sau:
Phụ lục B
191
Hình B1. Bản đồ SVG được phát sinh bởi GenerateSVGMap Để chạy client cần chép toàn bộ thư mục UngDung_Client vào
Inetpub\wwwroot\ sau đó mở tập tinh index.html.
Màn hình ứng dụng:
Phụ lục B
192
Hình B2. Bản đồ SVG được hiển thị trong chương trình client
Muốn phóng to hay thu nhỏ tạm thởi dùng các khả năng của Adobe SVG
Viewer 6.0.
Rê chuột vào các đối tượng để xem chú thích thông tin chi tiết của đối tượng
đó.
Phụ lục B
193
Hình B3. Minh hoạ chú thích khi rê chuột lên một đối tượng
Tài liệu tham khảo
Tài liệu tham khảo
1. Chung Hiếu Nghĩa, Nguyễn Ngọc Thuận, Luận văn cử nhân tin học - Xây
dựng hệ tra cứu thông tin bản đồ trên web, 2001.
2. Nhóm tác giả Elicom, Ngôn ngữ HTML 4 cho World Wide Web, NXB Hà
Nội, 2000.
3. Phạm Hữu Khang, Xây dựng và triển khai ứng dụng thương mại điện tử, Tập
2, NXB Thống Kê, 2003.
4. Dương Anh Đức, “Thuật toán Dijkstra”, Giáo trình Lý thuyết đồ thị, tr.38-42,
2004.
5. Dương Anh Đức và Lê Đình Duy, “Các phép biến đổi trong đồ họa hai
chiều”, Bài giảng đồ họa máy tính, tr.63-79, 2002.
6. ESRI Shapefile Technical Description, 1998.
7. http://www.w3.org/TR/2003/REC-SVG11-20030114/
8. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113
9. www.kevlindev.com
10. www.learnsvg.com
11. www.w3school.com
12. www.carto.net
13. www.inkscape.org