Chương 3. Cấu trúc định dạng tập tin SVG 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....
Chương Cấu trúc định dạng tập tin SVG thời hiển thị phương tiện trực quan thành phần ‘desc’ ‘title’ không hiển thị Tuy nhiên tác nhân người dùng hiển thị thành phần ‘title’ dạng tooltip (gợi ý) trỏ di chuyển qua thành phần đặc biệt Một cách trình diễn thay khác cho hình ảnh âm thực hiện, lúc thành phần ‘desc’ ‘title’ hiển thị cịn thành phần ‘path’ lại khơng Điều thực làm nhờ vào trang định kiểu khác Các cấu trúc sâu (deep structure) thành phần tham chiếu ‘use’ lại mong muốn người dùng khai thác phần mơ tả Sau ví dụ Tác nhân người dùng SVG không hiển thị thành phần ‘desc’ và’titile’ hiển thị phần nội dung lại thành phần ‘g’ Company sales by region This is a bar chart which shows company sales by region SYSTEM Các thành phần ‘decs’ ‘title’ chứa phần văn đánh dấu theo không gian tên khác Sau ví dụ: This is an example SVG file The global description uses markup from the 60 Chương Cấu trúc định dạng tập tin SVG Mydoc namespace Trong ví dụ thành phần ‘decs’ chứa văn đánh dấu với không gian tên mydoc= “http://example.org/mydoc” Các thành không gian tên mydoc dùng mydoc:title, para, emph Khi tạo tập tin SVG , tác giả thường thêm thành phần ‘title’ vào thành phần ‘svg’ tài liệu SVG độc lập Thành phần ‘title’ thành phần ‘svg’ thêm vào nhằm mục đích mơ tả nội dung phân đoạn SVG cho Vì người dùng thường tham khảo tài liệu ngữ cảnh nên tác giả cần cung cấp mô tả giàu ngữ cảnh cho tài liệu phần mô tả Để đảm bảo khả truy cập, tác nhân người dùng thường cho phép thành phần ‘title’ thành phần ‘svg’ ngồi có giá trị với người dùng Cơ chế thực tùy thuộc vào tác nhân người dùng (chẳng hạn thích nói lên cho người dùng nghe) Hiện thành phần SVG, cụ thể thành phần vật chứa thành phần văn bản, không đưa giới hạn số lượng thành phần ‘desc’ ‘title’ Tính linh động có thời điểm (7/2005) Trong tương lai có mơ hình nội dung phù hợp cho thành phần vật chứa, số thành phần vật chứa SVG cho phép nội dung đan xen nhau, quy tắc nội dung đan xen với XML không yêu cầu giới hạn Trong phiên tới ngôn ngữ SVG, quy tắc giới hạn nội dung đan xen đưa Người ta khuyên tốt nên có tối đa thành phần ‘title’ thành phần ‘desc’ xuất thành phần thành phần đặc biệt Những thành phần nên xuất trước thành phần khác (có thể ngoại trừ thành phần 61 Chương Cấu trúc định dạng tập tin SVG ‘metadata’) hay nội dung liệu Nếu tác nhân người dùng cần thiết chọn nhiều thành phần ‘desc’ ‘title’ việc xử lý (ví dụ, chọn chuỗi dùng làm tooltip), tác nhân người dùng chọn thành phần 3.8 Thành phần ‘symbol’: Thành phần ‘symbol’ (biểu tượng) dùng để định nghĩa đối tượng mẫu sử dụng thành phần ‘use’ Chúng ta sử dụng thành phần ‘symbol’ cho đồ hoạ dùng nhiều lần tài liệu tăng thêm tính cấu trúc ngữ nghĩa cho tài liệu Các tài liệu giàu cấu trúc làm tăng khả truy cập Các điểm khác thành phần ‘symbol’ ‘g’: • Một thành phần ‘symbol’ thân khơng hiển thị Chỉ (một tham chiếu tới thành phần ‘symbol’ thành phần ‘use’) hiển thị • Thành phần ‘symbol’ có thuộc tính viewBox preserveAspectRatio cho phép ‘symbol’ nằm vừa khung nhìn hình chữ nhật định rõ thành phần ‘use’ tham chiếu tới Các thành phần họ với ‘symbol’ ‘marker’ ‘pattern’ Thành phần ‘symbol’ không hiển thị trực tiếp, chúng tham chiếu thành phần ‘use’ Thuộc tính ‘display’ khơng dùng cho thành phần ‘symbol’ Vì thành phần ‘symbol’ không trực tiếp hiển thị chí thuộc tính ‘display’ thiết lập giá trị khác ‘none’ Các thành phần ‘symbol’ trạng thái sẵn sàng cho tham chiếu chí thuộc tính ‘display’ thành phần hay thành phần cha thiết lập ‘none’ 3.9 Thành phần ‘use’: Bất kỳ thành phần nội dung SVG ‘svg’, ‘symbol’, ‘g’, thành phần đồ hoạ hay thành phần ‘use’ khác mà thành phần mẫu 62 Chương Cấu trúc định dạng tập tin SVG dùng lại tài liệu SVG thành phần ‘use’ (sử dụng) Thành phần ‘use’ tham chiếu đến thành phần khác xác định nội dung đồ hoạ chứa vẽ vị trí cấp tài liệu Không giống thành phần ‘image’, thành phần ‘use’ tham chiếu đến trọn vẹn tập tin Thành phần ‘use’ có thuộc tính tuỳ chọn ‘x’, ‘y’, ‘width’ ‘height’ dùng để ánh xạ nội dung đồ hoạ thành phần tham chiếu lên phạm vi hình chữ nhật theo hệ trục toạ độ thời Kết dùng thành phần ‘use’ là: nội dung thành phần tham chiếu thể nhân vào DOM độc lập không hữu mà có thành phần ‘use’ cha thành phần tham chiếu; cha thành phần ‘use’ cha cấp cao chúng Bởi DOM độc lập khơng hữu nên mơ hình đối tượng tài liệu SVG (SVG DOM) chứa thành phần ‘use’ thuộc tính SVG DOM khơng rõ thành phần tham chiếu thành phần ‘use’ Đối với tác nhân người dùng hỗ trợ định kiểu với trang định kiểu CSS, việc nhân thành phần tham chiếu vào DOM khơng có thực chép giá trị thuộc tính nhận từ CSS thành phần tham chiếu nội dung Tuy nhiên kế thừa thuộc tính diễn thể thành phần tham chiếu chứa nguyên thành phần thành phần ‘use’ Thành phần tham chiếu thừa hưởng tất thuộc tính từ thành phần ‘use’ thành phần cha thành phần ‘use’ Một thể thành phần tham chiếu khơng thừa hưởng thuộc tính từ thành phần cha thành phần tham chiếu Nếu thuộc tính kiện gắn cho thành phần tham chiếu đối tượng nhận kiện (đích) đối tượng SVGElementInstance (một thể thành phần SVG) thể tương ứng với thành phần tham chiếu Việc quản lý kiện tài liệu không thực tồn hoạt động thể thành phần tham chiếu thành phần thành phần ‘use’, ngoại trừ 63 Chương Cấu trúc định dạng tập tin SVG điều kiện gửi tới đối tượng thể SVGElementinstance tương ứng với đích thành phần đích thời tham chiếu Một kiện nhân lên qua phần không thực thực hữu của tài liệu giống tài liệu bình thường: kiện từ thành phần gốc (root) xuống thành phần ‘use’ sau qua thành phần không thực tồn pha bắt kiện Tiếp sau pha đích đích của kiện, sau dần lên từ khơng thực tồn đến thành phần ‘use’ quay bình thường tới thành phần gốc pha phát kiện lên Một thành phần tất đối tượng thể SVGELementInstance tương ứng dùng chung danh sách lắng nghe kiện.Thuộc tính currentTarget (đích tại) kiện dùng để xác định đối tượng lắng nghe kiện triệu gọi Ứng xử thuộc tính ‘visibility’ thỏa mơ hình thừa hưởng thuộc tính Do định ‘visibility:hidden’ thành phần ‘use’ không đảm bảo nội dung tham chiếu không hiển thị Nếu dùng thành phần ‘use’ định ‘visibility:hidden’ tham chiếu đến thành phần định ‘visibility:hiddden’ hay ‘visibility:inherit’ thành phần bị ẩn Tuy nhiên, thành phần tham chiếu định ‘visibility:visible’ thành phần hiển thị dù thành phần ‘use’ định ‘visibility:hidden’ Nếu thành phần tham chiếu ảnh động thể ảnh động Một thành phần ‘use’ có kết hiển thị thể thay thể nội dung phát sinh: • Nếu thành phần ‘use’ tham chiếu tới thành phần ‘symbol’: Trong nội dung phát sinh, thành phần ‘use’ thay thành phần ‘g’, tất thuộc tính ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ ‘xlink:href’ chuyển sang thành phần ‘g’ Một phép biến đổi tịnh tuyến translate(x,y) bổ sung vào cuối thuộc tính ‘transform’ thành phần ‘g’ phát sinh, với x y phép biến đổi 64 Chương Cấu trúc định dạng tập tin SVG giá trị thuộc tính ‘x’ ‘y’ thành phần ‘use’ Thành phần ‘symbol’ tham chiếu nội dung nhân lên đưa vào phát sinh, với ngoại lệ thành phần ‘symbol’ thay thành phần ‘svg’ Thành phần ‘svg’ phát sinh có giá trị thuộc tính rõ ràng ‘width’ ‘height’ Nếu thuộc tính ‘width’ và/hoặc ‘height’ cung cấp thành phần ‘use’, thuộc tính 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 định thành phần ‘svg’ phát sinh dùng giá trị “100%” cho thuộc tính • 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’ thay thành phần ‘g’, tất thuộc tính thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ ‘xlink:href’ chuyển sang thành phần ‘g’ Một phép biến đổi tịnh tuyến translate(x,y) bổ sung vào cuối thuộc tính ‘transform’ thành phần ‘g’ phát sinh, với x y phép biến đổi giá trị thuộc tính ‘x’ ‘y’ thành phần ‘use’ Thành phần ‘svg’ tham chiếu nội dung nhân vào phát sinh Nếu thuộc tính ‘width’ và/hoặc ‘height’ cung cấp thành phần ‘use’, giá trị đè (override) lên thuộc tính tương ứng thành phần ‘svg’ phát sinh • Những trường hợp khác: Trong nội dung phát sinh, thành phần ‘use’ thay thành phần ‘g’, tất thuộc tính thành phần ‘use’ ngoại trừ ‘x’, ‘y’, ‘width’, ‘height’ ‘xlink:ref’ chuyển vào thành phần ‘g’ phát sinh Một phép biến đổi tịnh tiến translate(x,y) thêm vào cuối thuộc tính ‘transform’ thành phần ‘g’ phát sinh, với x y nhận giá trị thc tính ‘x’ ‘y’ thành phần ‘use’ Đối tượng tham chiếu nội dung nhân vào phát sinh 65 Chương Cấu trúc định dạng tập tin SVG Đối với tác nhân người dùng hỗ trợ định kiểu trang định kiểu CSS, thành phần ‘g’ phát sinh mang giá trị thuộc tính ‘cascaded’ (được xếp tầng) thành phần ‘use’ có từ trang định kiểu phân tầng CSS Hơn nữa, nhân nguồn tài nguyên tham chiếu mang giá trị thuộc tính “cascaded” nhận từ trang định kiểu phân tầng CSS thành phần tham chiếu Do đó, kết chọn lọc CSS kết hợp với thuộc tính ‘class’ ‘style’ đựơc thay giá trị tương đương chức thuộc tính ‘style’ nội dung phát sinh chuyển tải giá trị thuộc tính “cascaded” Ví dụ 1: Sau ví dụ đơn giản dung hai thành phần ‘use’ ‘rect’: Example Use01 - Simple case of 'use' on a 'rect' 66 Chương Cấu trúc định dạng tập tin SVG Cây tài liệu ví dụ này: svg svg defs defs rect rect use g rect Cây tài liệu ban đầu Cây tài liệu nội dung phát sinh Hình 3.5 Cây tài liệu thành phần ‘use’ dùng ‘g’ Kết trình duyệt Hình 3.6 Minh họa thành phần ‘use’ dùng ‘g’ Nội dung tài liệu phát sinh: Example Use01-GeneratedContent - Simple case of 'use' on a 'rect' Ví dụ 2: Ví dụ sau dùng hai thành phần ‘use’ ‘symbol’: 67 Chương Cấu trúc định dạng tập tin SVG Ví dụ 3: Sau đ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’: Example Use03 'use' with a 'transform' attribute Kết 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 sau: Example Use03-GeneratedContent - 'use' with 'transform' attribute 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 Cấu trúc định dạng tập tin SVG Example Use04 - 'use' with CSS styling path { shape-rendering: optimizeQuality } /* rule */ g > path { visibility: hidden } ]]> Kết qủa 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 sau: 71 Chương Cấu trúc định dạng tập tin SVG Example Use04-GeneratedContent - 'use' with a 'transform' attribute Trong đoạn tài liệu có sử dụng số quy tắc định kiểu áp dụng cho nội dung phát sinh(các quy tắc từ 1-6 10-12), ngun tắc cịn lại khơng dùng (các quy tắc từ 7-9) • Quy tắc 8: Bộ chọn lọc định kiểu CSS áp dụng tài liệu bình thường mà khơng áp dụng cho tài liệu phát sinh, hai chọn lọc định kiểu (trong quy tắc ) không phát sinh tài liệu phát sinh • Quy tắc 9: Cây tài liệu phát sinh thừa hưởng từ cha thành phần ‘use’ mà khơng thừa hưởng thuộc tính cha thành phần tham chiếu, quy tắc không ảnh hưởng đến kết tài liệu phát sinh 72 Chương Cấu trúc định dạng tập tin SVG Trong đoạn tài liệu phát sinh trên, thuộc tính định kiểu chọn lọc tìm thấy chuyển thành thuộc tính nội tuyến ‘style’của thành phần ‘g’ ‘path’ Khi thành ‘use’ tham chiếu tới thành phần khác ‘use’ hay nội dung chứa thành phần ‘use’, hướng tiếp cận nhân (sao thành phần giống với thành phần tham chiếu) lặp lại với thành phần ‘use’ bắt gặp thành phần tham chiếu Tuy nhiên thành phần không trực tiếp hay trực tiếp tham chiếu tới thành phần tham chiếu tới mình, khơng tạo lỗi lặp vơ hạn Một số thuộc tính thành phần ‘use’: x= “” Hồnh độ góc phạm vi hình chữ nhật mà thành phần tham chiếu hiển thị y= “” Tung độ góc phạm vi hình chữ nhật mà thành phần tham chiếu hiển thị width = “” Độ lớn chiều ngang phạm vi hình chữ nhật mà thành phần tham chiếu hiển thị Giá trị âm gây lỗi, nhận giá trị khơng hiển thị thành phần height= “” Độ lớn chiều dọc phạm vi hình chữ nhật mà thành phần tham chiếu hiển thị Giá trị âm gây lỗi, cịn nhận giá trị không hiển thị thành phần xlink:href= “” Là tham chiếu tới phân đoạn hay thành phần khác tài liệu SVG 73 Chương Cấu trúc định dạng tập tin SVG 3.10 Thành phần ‘image’: Thành phần ‘image’ (hình ảnh) xác định nội dung tập tin (hình ảnh) hiển thị phạm vi hình chữ nhật cho hệ trục tọa độ người dùng Thành phần ‘image’ tham chiếu tới tập tin ảnh quét PNG hay JPEG hay tập tin có loại MIME “image/svg+xml” (là tập tin SVG) Các 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ợ định dạng tập tin ảnh PNG, JPEG SVG Kết xử lý thành phần ‘image’ cho ả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 ảnh quét PNG hay JPEG có ba kênh màu kết nhận ảnh với bốn kênh màu RGBA, kênh alpha (trong suốt) thiết lập giá trị (khơng có độ suốt với nền) Đối với ảnh quét kênh màu kết ảnh bốn kênh màu, trường hợp kênh màu dùng để tính ba kênh màu cịn lại với kênh alpha thiết lập giá trị Thành phần ‘image’ thiết lập khung nhìn cho tập tin tham chiếu Đường bao khung nhìn rõ thuộc tính ‘x’, ‘y’, ‘width’ ‘height’ Cách hiển thị tỉ lệ co dãn ảnh tham chiếu kiểm sốt thuộc tính ‘preserveAspectRatio’ (bảo toàn tỉ lệ cạnh ảnh) Khi thành phần ‘image’ tham chiếu tới ảnh SVG thuộc tính ‘preserveAspectRatio’ thuộc tính xén (clip) tràn (overflow) thành phần gốc ảnh SVG tham chiếu bị bỏ qua Thay vào thuộc tính ‘preserveAspectRatio’ thành phần ‘image’ tham chiếu định nghĩa cách thức nội dung ảnh SVG hiển thị khung nhìn thuộc tính xén tràn thành phần ‘image’ định nghĩa cách thức nội dung ảnh SVG xén theo hệ trục toạ độ khung nhìn Giá trị thuộc tính ‘viewBox’ dùng với thuộc tính ‘preserveAspectRatio’ định nghĩa nội dung ảnh tham chiếu Đối với nội dung tham chiếu có định ‘viewBox’ (ví dụ, tập tin SVG chứa thuộc tính ‘viewBox’ thành phần SVG ngồi cùng) giá trị 74 Chương Cấu trúc định dạng tập tin SVG ‘viewBox’ dùng Đối với ảnh quét (PNG, JPEG) đường bao ảnh dùng ‘viewBox’ có giá trị “0 [chiều rộng ảnh] [chiều cao ảnh]” Nếu nội dung tham chiếu khơng có giá trị tương ứng với ‘viewBox’ (tập tin SVG khơng có ‘viewBox’) thuộc tính ‘preserveAspectRatio’ bị bỏ qua, nội dung ảnh tham chiếu tịnh tiến đoạn tương ứng với giá trị thuộc tính ‘x’ ‘y’ Ví dụ, ảnh tham chiếu PNG hay JPEG thuộc tính preserveAspectRatio = “xMinYmin meet”, tỉ lệ cạnh ảnh quét bảo toàn, ảnh quét định kích thước lớn mà đảm bảo toàn ảnh quét hiển thị khung nhìn mà thành phần ‘image’ thiết lập Góc trái ảnh quét canh thẳng với góc trái khung nhìn định nghĩa thuộc tính ‘x’, ‘y’, ‘width’, ‘heigth’ thành phần ‘image’ tham chiếu tới ảnh Nếu thuộc tính preserveAspectRatio= ‘none’ tỉ lệ cạnh ảnh khơng bảo tồn Khi ảnh co vừa khít khung nhìn, góc trái ảnh trùng với góc trái khung nhìn góc phải ảnh trùng với góc phải khung nhìn (x+width , y+height) Nguồn tài nguyên tham chiếu thành phần ‘image’ cung cấp tài liệu riêng Tài liệu riêng phát sinh phân tích riêng mơ hình đối tượng tài liệu riêng (nếu nguồn tài nguyên tập tin XML) Do khơng có kế thừa thuộc tính vào ảnh Khơng giống với thành phần ‘use’, thành phần ‘image’ tham chiếu đến thành phần tập tin SVG Các thuộc tính thường sử dụng thành phần ‘image’: x= “” Toạ độ x góc trái phạm vi hình chữ nhật chứa hình ảnh tham chiếu Giá trị mặc định “0” y= “” 75 Chương Cấu trúc định dạng tập tin SVG Toạ độ y góc trái phạm vi hình chữ nhật chứa hình ảnh tham chiếu Giá trị mặc định “0” width= “” Số đo chiều ngang phạm vi hình chữ nhật chứa hình ảnh tham chiếu Khơng nhận giá trị âm, thiết lập giá trị âm gây lỗi Nếu khơng hiển thị thành phần height= “” Số đo chiều dọc phạm vi hình chữ nhật chứa hình ảnh tham chiếu Không nhận giá trị âm, thiết lập giá trị âm gây lỗi Nếu khơng hiển thị thành phần xlink:href= “” Tham chiếu URI tới nguồn tài nguyên hình ảnh preserveAspectRatio= “none” “xMinYMin” … Thiết lập giá trị thích hợp để ảnh co dãn hiển thị mong muốn Ví dụ 1: Sau ví dụ đơn giản sử dụng thành phần “image” tham chiếu tới ảnh PNG This graphic links to an external image My image 76 Chương Cấu trúc định dạng tập tin SVG 3.11 Các hình 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 hình chữ nhật với hệ trục toạ độ người dùng thời Để định nghĩa hình chữ nhật trịn góc ta thiết lập thuộc tính ‘rx’ ‘ry’ thành phần ‘rect’ Một số thuộc tính thường dùng thành phần ‘rect’: x= “” Toạ độ x góc trái hình chữ nhật, giá trị mặc định “0” y= “” Toạ độ y góc trái hình chữ nhật, giá trị mặc định “0” width= “” Độ lớn chiều ngang hình chữ nhật, giá trị âm gây lỗi Nếu nhận giá trị “0” khơng hiển thị thành phần height= “” Độ lớn chiều dọc hình chữ nhật, giá trị âm gây lỗi Nếu nhận giá trị “0” khơng hiển thị thành phần rx = “” Dành cho hình chữ nhật trịn góc, bán kính trục x 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 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 rect01 rectangle with sharp 77 Chương Cấu trúc định dạng tập tin SVG corners Kết trình duyệt: Hình 3.11 Minh họa thành phần ‘rect’ vng góc Ví dụ 2: Hình chữ nhật trịn góc Example rect02 - rounded rectangles Kết trình duyệt: Hình 3.12 Minh họa thành phần ‘rect’ trịn góc 78 Chương Cấu trúc định dạng tập tin SVG 3.11.2 Hình trịn – thành phần ‘circle’ Thành phần ‘circle’ định nghĩa hình trịn dựa vào tâm bán kính Một số thuộc tính thành phần ‘circle’: cx= “” Toạ độ x tâm đường tròn Mặc định “0” cy= “” Toạ độ y tâm đường tròn Mặc định “0” r= “” Bán kính đường trịn Giá trị âm gây lỗi Nếu “0” khơng hiển thị thành phần Ví dụ 1: Hình trịn viền xanh, bên màu đỏ Example circle01 - circle filled with red and stroked with blue Kết trình duyệt: Hình 3.13 Minh họa thành phần ‘circle’ 3.11.3 Hình e-lip – thành phần ‘ellipse’ Thành phần ‘ellipse’ định nghĩa hình e-lip hệ trục tọa độ người dùng dựa tâm hai bán kính 79 ... ... ... tương ứng sau: 71 Chương Cấu trúc định dạng tập tin SVG