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

Chương 3. Cấu trúc định dạng tập tin SVG 60 hiện thời được hiển thị trên phương tiện trực quan thì các thành phần ‘desc’ và ‘title’ không được hiển thị. Tuy nhiên các tác nhân người dùng có thể hiển thị thành phần ‘title’ dưới dạng tooltip (gợi ý) khi con trỏ di chuyển qua các thành phần đặc biệt nào đó. Một cách trình diễn thay thế khác cho cả hình ảnh và âm thanh cũng có thể thực hiện, và lúc đó các thành phần ‘desc’ và ‘title’ được hiển thị còn các thành phần ‘path’ thì lại không. Điều đó thực sự có th ể làm được nhờ vào một trang định kiểu khác. Các cấu trúc sâu (deep structure) và các thành phần tham chiếu ‘use’ đôi khi lại mong muốn người dùng khai thác các phần mô tả này. Sau đây là một ví dụ. Tác nhân người dùng SVG không hiển thị các thành phần ‘desc’ và’titile’ nhưng sẽ hiển thị phần nội dung còn lại của thành phần ‘g’. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <title> Company sales by region </title> <desc> This is a bar chart which shows company sales by region. </desc> <! Bar chart defined as vector data > </g> </svg> Các thành phần ‘decs’ và ‘title’ có thể chứa phần văn bản được đánh dấu theo các không gian tên khác. Sau đây là ví dụ: <?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc xmlns:mydoc="http://example.org/mydoc"> <mydoc:title> This is an example SVG file </mydoc:title> <mydoc:para> The global description uses markup from the <mydoc:emph> Chương 3. Cấu trúc định dạng tập tin SVG 61 Mydoc </mydoc:emph> namespace. </mydoc:para> </desc> <g> <! the picture goes here > </g> </svg> Trong ví dụ trên thành phần ‘decs’ chứa văn bản được đánh dấu với không gian tên mydoc= “http://example.org/mydoc ”. Các thành của không gian tên mydoc được dùng là mydoc:title, para, và emph. Khi tạo tập tin SVG , tác giả thường thêm một thành phần con ‘title’ vào thành phần ‘svg’ ngoài cùng của tài liệu SVG độc lập. Thành phần con ‘title’ của thành phần ‘svg’ được thêm vào nhằm mục đích mô tả nội dung của phân đoạn SVG được cho. Vì người dùng thường tham khảo tài liệu ngoài ngữ cảnh nên tác giả cần cung cấp các mô tả giàu ngữ cảnh cho tài liệu trong phần mô tả này. Để đảm bảo khả năng truy cập, các tác nhân ng ười dùng thường chỉ cho phép thành phần con ‘title’ của thành phần ‘svg’ ngoài cùng có giá trị với người dùng. Cơ chế này được thực hiện tùy thuộc vào tác nhân người dùng (chẳng hạn như chú thích hay là nói lên cho người dùng nghe). Hiện tại các thành phần của SVG, cụ thể là thành phần vật chứa và thành phần văn bản, không đưa ra các giới hạn về số lượng các thành phần con ‘desc’ và ‘title’. Tính linh động này chỉ có trong thời điểm hiện nay (7/2005). Trong tương lai sẽ có m ột mô hình nội dung phù hợp cho các thành phần vật chứa, bởi vì một số thành phần vật chứa trong SVG cho phép các nội dung đan xen nhau, và các quy tắc về nội dung đan xen với XML không yêu cầu giới hạn. Trong các phiên bản tới của ngôn ngữ SVG, các quy tắc giới hạn nội dung đan xen sẽ được đưa ra. Người ta khuyên tốt nhất nên có tối đa một thành phần ‘title’ và một thành phần ‘desc’ xuất hiện trong thành phần con của thành phần đặc biệt nào đó. Những thành phần này nên xuất hiện trước các thành phần con khác (có thể ngoại trừ thành phần Chương 3. Cấu trúc định dạng tập tin SVG 62 ‘metadata’) hay nội dung dữ liệu. Nếu các tác nhân người dùng cần thiết chọn giữa nhiều thành phần ‘desc’ và ‘title’ trong việc xử lý (ví dụ, chọn ra một chuỗi dùng làm tooltip), tác nhân người dùng sẽ chọn thành phần đầu tiên. 3.8 Thành phần ‘symbol’: Thành phần ‘symbol’ (biểu tượng) được dùng để định nghĩa các đối tượng mẫu có thể được sử dụng bởi thành phần ‘use’. Chúng ta sử dụng thành phần ‘symbol’ cho các đồ hoạ được dùng nhiều lần trong cùng một tài liệu sẽ tăng thêm tính cấu trúc và ngữ nghĩa cho tài liệu. Các tài liệu giàu cấu trúc sẽ làm tăng khả năng truy cập. Các điểm khác nhau cơ bản giữa thành phần ‘symbol’ và ‘g’: • Một thành ph ần ‘symbol’ bản thân nó không được hiển thị. Chỉ có thể hiện của nó (một tham chiếu tới thành phần ‘symbol’ bởi thành phần ‘use’) được hiển thị. • Thành phần ‘symbol’ có thuộc tính viewBox và preserveAspectRatio cho phép ‘symbol’ nằm vừa trong khung nhìn hình chữ nhật được định rõ bởi thành phần ‘use’ đang tham chiếu tới nó. Các thành phần cùng họ với ‘symbol’ là ‘marker’ và ‘pattern’. Thành phần ‘symbol’ không bao giờ được hiển thị trực tiếp, chúng chỉ được tham chiếu bởi thành phầ n ‘use’. Thuộc tính ‘display’ không được dùng cho thành phần ‘symbol’. Vì thế các thành phần ‘symbol’ sẽ không được trực tiếp hiển thị thậm chí thuộc tính ‘display’ được thiết lập một giá trị khác ‘none’. Các thành phần ‘symbol’ luôn ở trạng thái sẵn sàng cho tham chiếu thậm chí khi thuộc tính ‘display’ của thành phần đó hay bất kỳ thành phần cha của nó được thiết lập là ‘none’. 3.9 Thành phần ‘use’: Bất kỳ thành phần nào trong nội dung SVG như ‘svg’, ‘symbol’, ‘g’, thành phần đồ hoạ hay thành phần ‘use’ khác mà có thể là thành phần mẫu đều có thể Chương 3. Cấu trúc định dạng tập tin SVG 63 được dùng lại trong tài liệu SVG bằng thành phần ‘use’ (sử dụng). Thành phần ‘use’ tham chiếu đến thành phần khác và xác định nội dung đồ hoạ được chứa vẽ tại vị trí được cấp trong tài liệu này. Không giống thành phần ‘image’, thành phần ‘use’ không thể tham chiếu đến trọn vẹn một tập tin. Thành phần ‘use’ có các thuộc tính tuỳ chọn ‘x’, ‘y’, ‘width’ và ‘height’ dùng để ánh xạ nội dung đồ hoạ của thành phần được tham chiếu lên một phạ m vi hình chữ nhật theo hệ trục toạ độ hiện thời. Kết quả khi dùng thành phần ‘use’ là: nội dung của thành phần được tham chiếu như thể được nhân bản vào trong một cây DOM độc lập không hiện hữu mà cây này có thành phần ‘use’ là cha của các thành phần được tham chiếu; còn cha của thành phần ‘use’ là cha cấp cao hơn của chúng. Bởi vì cây DOM độc lập không hiện hữu nên mô hình đối tượng tài liệu SVG (SVG DOM) chỉ chứa thành phần ‘use’ và thuộ c tính của nó. SVG DOM không chỉ rõ các thành phần được tham chiếu là con của thành phần ‘use’. Đối với các tác nhân người dùng hỗ trợ định kiểu với trang định kiểu CSS, thì việc nhân bản các thành phần được tham chiếu vào một cây DOM không có thực cũng sao chép các giá trị thuộc tính nhận được từ CSS trên thành phần được tham chiếu và nội dung của nó. Tuy nhiên sự kế thừa thuộc tính diễn ra như thể thành phần được tham chiếu được chứa nguyên bả n là thành phần con của thành phần ‘use’. Thành phần được tham chiếu thừa hưởng tất cả các thuộc tính từ thành phần ‘use’ và các thành phần cha của thành phần ‘use’. Một thể hiện của thành phần được tham chiếu không thừa hưởng các thuộc tính từ thành phần cha của thành phần được tham chiếu. Nếu thuộc tính sự kiện được gắn cho thành phần được tham chiếu thì đối tượng nhận sự kiện (đích) sẽ là đối tượng SVGElementInstance (một thể hiện thành phần SVG) trong cây thể hiện tương ứng với thành phần được tham chiếu. Việc quản lý sự kiện trong cây tài liệu không thực sự tồn tại hoạt động như thể thành phần được tham chiếu là thành phần con của thành phần ‘use’, ngoại trừ một Chương 3. Cấu trúc định dạng tập tin SVG 64 điều là các sự kiện được gửi tới các đối tượng thể hiện SVGElementinstance tương ứng với đích và các thành phần đích hiện thời trong cây con được tham chiếu. Một sự kiện sẽ nhân lên qua các phần không thực sự cũng như thực sự hiện hữu của cây của cây tài liệu giống như cây tài liệu bình thường: đầu tiên sự kiện sẽ đi từ thành phần gố c (root) xuống thành phần ‘use’ và sau đó đi qua các thành phần của cây không thực sự tồn tại trong pha bắt sự kiện. Tiếp sau đó là pha đích tại đích của của sự kiện, sau đó đi dần lên từ cây không thực sự tồn tại đến thành phần ‘use’ và quay về cây bình thường tới thành phần gốc trong pha phát sự kiện lên. Một thành phần và tất cả các đối tượng thể hiện SVGELementInstance tương ứng dùng chung một danh sách lắng nghe sự kiện.Thuộc tính currentTarget (đích hiện tại) của sự kiện có thể được dùng để xác định đối tượng lắng nghe sự kiện nào được triệu gọi. Ứng xử của thuộc tính ‘visibility’ thỏa mô hình thừa hưởng thuộc tính. Do đó khi chỉ định ‘visibility:hidden’ trong thành phần ‘use’ không đảm bảo rằng nội dung được tham chiếu không được hiển thị. Nếu dùng thành phần ‘use’ chỉ định ‘visibility:hidden’ tham chi ếu đến thành phần chỉ định ‘visibility:hiddden’ hay ‘visibility:inherit’ thì thành phần này sẽ bị ẩn đi. Tuy nhiên, nếu thành phần được tham chiếu chỉ định ‘visibility:visible’ thì thành phần đó sẽ hiển thị dù thành phần ‘use’ chỉ định là ‘visibility:hidden’. Nếu thành phần được tham chiếu là ảnh động thì thể hiện của nó cũng là ảnh động. Một thành phần ‘use’ có cùng kết quả hiển thị như thể nó được thay thể bởi nội dung được phát sinh: • Nếu thành phần ‘use’ tham chiếu tới một thành phần ‘symbol’: Trong nội dung được phát sinh, thành phần ‘use’ sẽ được thay thế bởi thành phần ‘g’, tất cả các thuộc tính của ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi Chương 3. Cấu trúc định dạng tập tin SVG 65 trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘symbol’ được tham chiếu và nội dung của nó được nhân bản lên và đưa vào cây được phát sinh, với một ngoại lệ là thành phần ‘symbol’ được thay thế bằng một thành phần ‘svg’. Thành phần ‘svg’ được phát sinh này sẽ có các giá trị thuộc tính rõ ràng ‘width’ và ‘height’. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các thuộc tính này sẽ được chuyển vào thành phần ‘svg’ đựơc phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ không được chỉ định thì thành ph ần ‘svg’ được phát sinh sẽ dùng giá trị “100%” cho những thuộc tính này. • Nếu thành phần ‘use’ tham chiếu tới thành phần ‘svg’: Trong nội dung phát sinh, thành phần ‘use’ sẽ được thay thế bằng thành phần ‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:href’ đều được chuyển sang thành phần ‘g’. Một phép biến đổi tịnh tuyến translate(x,y) được bổ sung vào cuối của thuộc tính ‘transform’ của thành phần ‘g’ được phát sinh, với x và y của phép biến đổi trên là giá trị thuộc tính ‘x’ và ‘y’ của thành phần ‘use’. Thành phần ‘svg’ được tham chiếu và nội dung của nó được nhân bản vào cây được phát sinh. Nếu thuộc tính ‘width’ và/hoặc ‘height’ được cung cấp trong thành phần ‘use’, thì các giá trị này sẽ đè (override) lên các thuộc tính tương ứng của thành phần ‘svg’ trong cây phát sinh. • Những trường hợp khác: Trong nội dung phát sinh, thành phần ‘use’ được thay thế bằng thành phần ‘g’, khi đó tất cả các thuộc tính của thành phần ‘use’ ngoại tr ừ ‘x’, ‘y’, ‘width’, ‘height’ và ‘xlink:ref’ được chuyển vào thành phần ‘g’ được phát sinh. Một phép biến đổi tịnh tiến translate(x,y) được thêm vào cuối của thuộc tính ‘transform’ trong thành phần ‘g’ được phát sinh, với x và y nhận giá trị của thuôc tính ‘x’ và ‘y’ trong thành phần ‘use’. Đối tượng được tham chiếu và nội dung của nó được nhân bản vào cây phát sinh. Chương 3. Cấu trúc định dạng tập tin SVG 66 Đối với các tác nhân người dùng hỗ trợ định kiểu bằng trang định kiểu CSS, thành phần ‘g’ được phát sinh sẽ mang giá trị thuộc tính ‘cascaded’ (được xếp tầng) của thành phần ‘use’ có được từ trang định kiểu phân tầng CSS. Hơn thế nữa, nhân bản của nguồn tài nguyên được tham chiếu mang trong nó giá trị thuộc tính “cascaded” nhận về từ trang định kiểu phân tầng CSS trong thành phần được tham chiếu. Do đó, kết quả củ a các bộ chọn lọc CSS khi kết hợp với các thuộc tính ‘class’ và ‘style’ đựơc thay thế bằng các giá trị tương đương chức năng của thuộc tính ‘style’ trong nội dung phát sinh chuyển tải giá trị thuộc tính “cascaded”. Ví dụ 1 : Sau đây là ví dụ đơn giản dung hai thành phần ‘use’ và ‘rect’: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="20" y="10" xlink:href="#MyRect" /> </svg> Chương 3. Cấu trúc định dạng tập tin SVG 67 Cây tài liệu của ví dụ này: Hình 3.5. Cây tài liệu của thành phần ‘use’ chỉ dùng ‘g’ Kết quả trên trình duyệt sẽ là. Hình 3.6 Minh họa thành phần ‘use’ chỉ dùng ‘g’ Nội dung của tài liệu phát sinh: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use01-GeneratedContent - Simple case of 'use' on a 'rect'</desc> <! 'defs' section left out > <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <! Start of generated content. Replaces 'use' > <g transform="translate(20,10)"> <rect width="60" height="10"/> </g> <! End of generated content > </svg> Ví dụ 2 : Ví dụ sau dùng hai thành phần ‘use’ và ‘symbol’: svg defs use rect svg defs g rect rect Cây tài liệu ban đầu Cây tài liệu của nội dung phát sinh Chương 3. Cấu trúc định dạng tập tin SVG 68 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use02 - 'use' on a 'symbol'</desc> <defs> <symbol id="MySymbol" viewBox="0 0 20 20"> <desc>MySymbol - four rectangles in a grid</desc> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </symbol> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" /> </svg> Cây tài lại của ví dụ này là: Hình 3.7 Cây tài liệu của thành phần ‘use’ dùng ‘g’ và ‘svg’ svg defs rect use symbol rect … svg defs rect g symbol Rect svg rect … Cây tài liệu ban đầu Cây tài liệu phát sinh Chương 3. Cấu trúc định dạng tập tin SVG 69 Kết quả trên trình duyệt: Hình 3.8 Minh họa thành phần ‘use’ dùng ‘g’ và ‘svg’ Nội dung tài liệu phát sinh: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use02-GeneratedContent - 'use' on a 'symbol'</desc> <! 'defs' section left out > <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <! Start of generated content. Replaces 'use' > <g transform="translate(45, 10)" > <! Start of referenced 'symbol'. 'symbol' replaced by 'svg', with x,y,width,height=0,0,100%,100% > <svg width="10" height="10" viewBox="0 0 20 20"> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </svg> <! End of referenced symbol > </g> <! End of generated content > </svg> Ví dụ 3 : Sau đây là đoạn tài liệu SVG chứng minh cách sử dụng thành phần ‘use’ với thuộc tính ‘transform’: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" [...]... content > < /svg> a 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 70 Chương 3 Cấu trúc định dạng tập tin SVG ... của e-lip dùng làm tròn góc hình chữ nhật ry = “” 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 Example rect02 - rounded rectangles ... standalone="no"?> Example Use03-GeneratedContent - 'use' with 'transform' attribute < /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: 71 Chương 3 Cấu trúc định dạng tập tin SVG This graphic links... PUBLIC "-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> Example circle01 - circle filled with red and stroked with blue ... fill-opacity:.5; /* rule 5 */ stroke-linecap:round; /* rule 12 */ stroke-dashoffset:50" > < /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... 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ì... 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à 1 0-1 2), 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ấu trúc định dạng tập tin SVG 71 <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> < ;svg width="12cm". Cấu trúc định dạng tập tin SVG 72 <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> < ;svg width="12cm". “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