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


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ụ


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


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


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


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


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

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>  </pgml>


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


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


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)


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


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


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.


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


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


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.


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-


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)

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>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>


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


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


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.


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


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


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.


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,…


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ì:


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


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.


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’.

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">  <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.

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"/>  <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


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à


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


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.

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>  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>


53


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:


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


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’.


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


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.

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)" />  <rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>


59


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

…

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>  </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>

61

Mydoc </mydoc:emph> namespace. </mydoc:para> </desc> <g>  </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


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ể


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


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


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.


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>

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>  <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" />  <g transform="translate(20,10)"> <rect width="60" height="10"/> </g>  </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


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

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>  <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" />  <g transform="translate(45, 10)" >  <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>  </g>  </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"

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>  <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" />  <g transform="translate(20,2.5) rotate(10)"> <rect x="0" y="0" width="60" height="10"/> </g>  </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"?>


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"?>

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>  <rect x="0" y="0" width="1200" height="300" style="fill:none; stroke:blue; stroke-width:3"/> <g style="/* rule 11 */ stroke-width:40">  <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>  </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.


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.


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ị


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’:


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”.



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”.


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.


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>


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’:


Toạ độ x góc trái trên của hình chữ nhật, giá trị mặc định là “0”


Toạ độ y góc trái trên của hình chữ nhật, giá trị mặc định là “0”


Độ 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.


Độ 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

78

corners</desc>  <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>


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>  <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>


Hình 3.12. Minh họa thành phần ‘rect’ tròn góc

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>  <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>


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’

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>  <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>

81


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>  <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g stroke="green" >

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>  <rect x="1" y="1" width="1198" height="398"

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>


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>  <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


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


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


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).

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 xmlns='http://www.w3.org/2000/svg' width="100px" height="200px" version="1.1"> <path d="M100,100 Q200,400,300,100"/>  </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”.


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>


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

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.


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" >  <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>

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" >  <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>  <g transform="translate(50,50)"> <g fill="none" stroke="red" stroke-width="3" >  <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>

91


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" >  <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g>  <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

92

<text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > ABC (rotate) </text> </g> </g>  <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>


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" >

93

<line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="120" /> </g>  <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>  <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>


Hình 3.21. Minh họa phép kéo xiên theo trục X, trục Y

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" >  <line x1="0" y1="1.5" x2="400" y2="1.5" /> <line x1="1.5" y1="0" x2="1.5" y2="150" /> </g>  <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>  <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>  <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>


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>.

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)">  </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)">  </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.


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.

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>  <rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke-width="12" />  <path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>  <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’

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)">  </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)">  </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’


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:


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.


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.


của khung nhìn.

• xMinYMid-Cần bảo toàn tỉ lệ cạnh


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


điểm giữa của khung nhìn.


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.


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.


của điểm giữa 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.



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.


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'


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"


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>


106


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ạ độ

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>  <svg x="25%" y="25%" width="50%" height="50%">  </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 ‘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’.


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>


109


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’


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"


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.


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 }


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.


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


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


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>.


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


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”.


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’:


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’


121

3.15 Thành phần ‘path’


‘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.


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>


Hình 3.28 Minh họa thành phần ‘path’

3.16 Thành phần ‘text’


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).


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


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>”

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>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>


126


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’


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.


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"

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>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>


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’

130

</tspan> </text> </g>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>


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>  <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


131


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

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>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" />

</svg>


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’


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ự.


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>

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>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </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>

137

 <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg>


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>  <rect x="1" y="1" width="998" height="298"


138

fill="none" stroke="blue" stroke-width="2" /> </svg>


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’


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.


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.


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.

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

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" />  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >  <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


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"

144

xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event </desc>  <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>  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>  <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


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>


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


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


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); }


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,


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:


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.


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.


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:


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.


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


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


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


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


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


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.


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”


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


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


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"/>


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>


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


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


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ế


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


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ó


id Số nguyên 4 không DanhSachNodeKe Chuỗi 4 Có

Bảng 4.3. Bảng MapNetworkDanhSachNodeKe


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.


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



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

tìm hiểu svg và ứng dụng

Documents