intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

TÌM HIỂU SVG VÀ ỨNG DỤNG - 3

Chia sẻ: Cao Tt | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST
Báo xấu
110
lượt xem 9
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Chương 2. Các vấn đề tổng quan 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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: TÌM HIỂU SVG VÀ ỨNG DỤNG - 3

  1. Chương 2. Các vấn đề tổng quan 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 40
  2. Chương 2. Các vấn đề tổng quan • 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. 41
  3. Chương 2. Các vấn đề tổng quan 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,… 42
  4. Chương 2. Các vấn đề tổng quan 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ự. 43
  5. Chương 3. Cấu trúc định dạng tập tin SVG 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ì: 44
  6. Chương 3. Cấu trúc định dạng tập tin SVG • 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 45
  7. Chương 3. Cấu trúc định dạng tập tin SVG 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. 46
  8. Chương 3. Cấu trúc định dạng tập tin SVG 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: 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’. 47
  9. Chương 3. Cấu trúc định dạng tập tin SVG 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. 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. 48
  10. Chương 3. Cấu trúc định dạng tập tin SVG Four separate rectangles 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 49
  11. Chương 3. Cấu trúc định dạng tập tin SVG 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: 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 đó: Và điều cuối cùng trong phần này cần lưu ý là các tiền tố không gian tên cũng có thể được chỉ định trong thành phần cha mà không nhất thiết phải là thành phần ‘svg’. 3.4.2 Thành phần ‘svg’: Các thuộc tính của thành phần ‘svg’: xmlns:[:prefix] = “tên nguồn tài nguyên” Là thuộc tính XML chuẩn được dùng để định danh một không gian tên XML. version= “” 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 50
  12. Chương 3. Cấu trúc định dạng tập tin SVG 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=”” 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=”” 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= “” Đố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 = “” Đố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. 51
  13. Chương 3. Cấu trúc định dạng tập tin SVG 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ụ: Two groups, each of two rectangles 52
  14. Chương 3. Cấu trúc định dạng tập tin SVG Kết quả trên trình duyệt sẽ là: Hình 3.2. Minh họa thành phần gom nhóm ‘g’ Một thành phần SVG có thể chứa các thành phần ‘g’ lồng vào trong nó đến một độ sâu thích hợp. Ví dụ: Groups can nest 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: 53
  15. Chương 3. Cấu trúc định dạng tập tin SVG ... 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: Tham chiếu URI được định nghĩa theo các dạng sau: = [ | ] [ "#" ] -hay- = [ | ] [ "#xpointer(id(" "))" ] là định danh của thành phần được tham chiếu là URI tuyệt đối là URI tương đối # và #xpointer(id()) 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 hay và do đó chỉ chứa định danh của phân đoạn được tham chiếu là #elementID hay #xpointer(id). • Tham chiếu URI không cục bộ (non-local URI references), khi đó tham chiếu URI chứa hoặc hoặc 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 54
  16. Chương 3. Cấu trúc định dạng tập tin SVG 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’. 55
  17. Chương 3. Cấu trúc định dạng tập tin SVG • 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 56
  18. Chương 3. Cấu trúc định dạng tập tin SVG 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ụ: 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. 57
  19. Chương 3. Cấu trúc định dạng tập tin SVG 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ụ: Local URI references within ancestor's 'defs' element. 58
  20. Chương 3. Cấu trúc định dạng tập tin SVG Kết quả trên trình duyệt sẽ là: Hình 3.3 Minh họa thành phần ‘defs’ Trong tài liệu trên, một thành phần linearGradient được định nghĩa trong thành phần ‘defs’ là con của thành phần ‘svg’, và là cha của thành phần ‘rect’ tham chiếu tới thành phần linearGradient. Như vậy các thành phần tham chiếu được đặt trong thành ‘defs’ nhưng như thế nào để dễ hiểu nhất ? Tốt nhất là đặt các thành phần được tham chiếu trong thành phần ‘defs’ là con trực tiếp của một trong số các thành phần cha của thành phần tham chiếu tới nó. Và ví dụ trên được xây dựng trên nguyên tắc này. Hình sau minh họa cho ví dụ trên: svg defs linearGradien … rect … 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 59
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2