Chương 3. Cấu trúc định dạng tập tin 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’ 120 Chương 3. Cấu trúc định dạng tập tin SVG 3.15 Thành phần ‘path’ 3.15.1
Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt: ảnh “a.png” bị làm mờ thuộc tính ‘fill-opacity = 0.3’, ảnh “a.png” thứ hai hiển thị phần đường xén hình chữ nhật clipRecorte: Hình 3.27 Minh họa thành phần ‘clipPath’ 120 Chương Cấu trúc định dạng tập tin SVG 3.15 Thành phần ‘path’ 3.15.1 Giới thiệu ‘Path’ (đường) đường viền hình tơ màu được, màu viền, đường xén, kết hợp tính Một đường mô tả cách dùng khái niệm “toạ độ tại” Chẳng hạn, vẽ giấy, “toạ độ tại” hiểu vị trí viết Vị trí viết thay đổi, đường viền hình (là đường mở đóng) vẽ cách rê bút theo đường cong hay đường thẳng từ “toạ độ tại” Đường viền đối tượng định nghĩa thuật ngữ ‘moveto’ (thiết lập vị trí mới), ‘lineto’ (vẽ đường thẳng), ‘curveto’ (vẽ đường cong Bézier), ‘arc’ (vẽ cung trịn hay cung e-líp) ‘closepath’ (vẽ ngược lại điểm ban đầu) Đường phức đường gồm nhiều đường 3.15.2 Thành phần ‘path’ Một số thuộc tính thành phần ‘path’: • d= “path data” Định nghĩa đường viền hình • pathLength = “” Độ dài ước lượng đường người cơng cụ tạo tính tốn 3.15.3 Dữ liệu đường (path data) Thành phần ‘path’ chứa thuộc tính d = “(path data)” Thuộc tính d chứa thị “moveto”, “line”, “curve”, “closepath” toạ độ hệ trục toạ độ người dùng 121 Chương Cấu trúc định dạng tập tin SVG Ví dụ 1: Ví dụ sau xây dựng đườ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” Example triangle01simple example of 'path' A path that draws a triangle a Kết trình duyệt: Hình 3.28 Minh họa thành phần ‘path’ 3.16 Thành phần ‘text’ 3.16.1 Giới thiệu Văn phần phân đoạn tài liệu SVG xây dựng thành phần ‘text’ Thành phần ‘text’ xây dựng thành phần đồ họa khác Do tính phép biến đổi toạ độ, vẽ, xén, mặt nạ áp dụng cho thành phần ‘text’ giống cho thành phần hình học (đường hình chữ nhật chẳng hạn) 122 Chương Cấu trúc định dạng tập tin SVG SVG khơng tự động xuống dịng hiển thị văn Để hiển thị nhiều dòng dùng phương pháp sau: • Dùng nhiều thành phần ‘text’ để hiển thị nhiều dịng • Dùng thành phần ‘text’ với nhiều thành phần ‘tspan’ có thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’ để thiết lập vị trí cho phần văn dịng Cách cho phép người dùng chọn nhiều dòng văn khác • Mơ tả văn khơng gian tên XML khác (XHTML chẳng hạn) sau nhúng nội tuyến thành phần ‘foreignOject’ (không trình bày phạm vi đề tài này) Chuỗi văn thành phần ‘text’ hiển thị hàng thẳng, hay dọc theo hình dạng thành phần ‘path’ SVG hỗ trợ tính hiển thị văn hàng thẳng thành phần ‘path’ sau: • Hiển văn theo hướng thẳng đứng hay hướng ngang • Hiển thị văn theo hướng từ trái sang phải hai theo hai chiều • Hỗ trợ phơng chữ Bởi văn SVG đóng gói liệu kí tự XML nên: • Dữ liệu văn nội dung SVG truy cập • Người dùng chọn, tìm kiếm, chép phần văn chọn vào vùng đệm • Các cơng cụ tìm kiếm tương thích XML tìm chuỗi văn nội dung SVG 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 thành phần đồ hoạ chứa chuỗi văn Thành phần ‘text’ chứa liệu văn bản, thuộc tính định hướng, phông 123 Chương Cấu trúc định dạng tập tin SVG chữ, màu Thành phần ‘text’ dùng phương thức xây dựng (render) thành phần đồ hoạ khác Thành phần ‘text’ xây dựng nét vẽ (glyph) vị trí văn khởi tạo (initial curent text position) Vị trí thiết lập thuộc tính ‘x’ ‘y’ thành phần ‘text’ Vị trí “văn khởi tạo” điều chỉnh theo giá trị thuộc tính ‘text-anchor’, có mặt thành phần ‘textPath’ chứa kí tự đầu tiên, và/hoặc giá trị thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’ thành phần ‘tspan’, ‘tref’ ‘altGlyph’ chứa kí tự Sau nét vẽ tương ứng với kí tự cho sẵn xây dựng xong, vị trí văn cập nhật cho kí tự kế tiếp.Trong trường hợp đơn giản nhất, vị trí văn vị trí trước cộng với giá trị tăng lên nét vẽ gây (theo chiều ngang hay chiều dọc) Một số thuộc tính thành phần ‘text’: • x = “+” Nếu cung cấp giá trị cho biết toạ độ X tuyệt đối vị trí văn Vị trí dùng để xây dựng nét vẽ tương ứng với kí tự thành phần ‘text’ thành phần khác Nếu mảng gồm phần tử cung cấp giá trị cho biết toạ độ X vị trí văn Các vị trí dùng để xây dựng nét vẽ tương ứng với kí tự ban đầu thành phần ‘text’ thành phần Giá trị mặc định “0” • y = “+” Xử lý thuộc tính ‘x’ trục y • dx = “” 124 Chương Cấu trúc định dạng tập tin SVG Thiết lập độ dịch chuyển dọc theo trục x so với vị trí văn cho kí tự thành phần ‘text’ hay thành phần • dy = “” Tác dụng thuộc tính ‘dx’ trục y • rotate = “+” Thiết lập góc quay nét vẽ tương ứng với kí tự quanh vị trí văn Thuộc tính “text-anchor” “font-family” dùng để canh lề thiết lập phông chữ cho phần văn thành phần “text” (sẽ trình bày sau) Ngồi ra, số thuộc tính khác sử dụng khơng mơ tả Ví dụ 1: Xuất chuỗi “Hello, out there” phông nền, dùng phông chữ Verdana tô nét vẽ màu xanh Example text01 'Hello, out there' in blue Hello, out there 125 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt: Hình 3.29 Minh họa thành phần ‘text’ 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 (thành phần ‘text’, ‘tspan’, ‘tref’) font-family = [[ | ],]* [ |] | inherit Thuộc tính dùng để định họ phông chữ dùng để hiển thị văn font-style = normal | italic | oblique | inherit Thuộc tính dùng để định kiểu hiển thị văn bình thường (normal), nghiên (italic), hay suốt (oblique) font-variant = normal | small-caps | inherit Thuộc tính dùng để định văn hiển thị 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 dùng để định độ lớn, nhỏ nét vẽ tương ứng với phông chữ khác họ 126 Chương Cấu trúc định dạng tập tin SVG font-size = | | | | inherit Thuộc tính dùng để định kích thước phơng chữ hiển thị cho văn Trong tài liệu SVG, cung cấp mà khơng có đơn vị định (ví dụ, giá trị 128) tác nhân người dùng hiểu giá trị chiều cao chữ hệ trục toạ độ người dùng Nếu cung cấp với đơn vị định cụ thể (ví dụ, 12pt 10%), tác nhân người dùng chuyển sang giá trị tương ứng hệ trục toạ độ người dùng font-size-adjust = | none | inherit Thuộc tính dùng để định giá trị riêng cho thành phần để bảo toàn chiều cao phông chữ chọn phông chữ thay font = [ [ || || ]? [ / ]? ] |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 nét chữ), ‘font-size’ (kích thước chữ), ‘line-height’ (được hiển ‘font-size’) ‘font-family’ (họ phông chữ) Định nghĩa chi tiết thuộc tính đặc tả trang định kiểu phân cấp (CSS) (khơng trình bày đây) 3.16.4 Thuộc tính canh lề Trong phạm vi đề tài, có thuộc tính canh lề ‘text-anchor’ xét đến 127 Chương Cấu trúc định dạng tập tin SVG Thuộc tính ‘text-anchor’ dùng để canh lề cho chuỗi văn tương đối so với điểm cho trước Thuộc tính ‘text-anchor’ nhận giá trị sau “start”, “middle”, “end”, “inherit” Mặc định “start” Ý nghĩa giá trị: • start Vị trí bắt đầu chuỗi trùng với vị trí văn khởi tạo • middle Vị trí chuỗi văn trùng với vị trí văn khởi tạo • end Vị trí cuối chuỗi trùng với vị trí văn khởi tạo 3.16.5 Thành phần ‘tspan’ Thành phần ‘tspan’ thành phần thành phần ‘text’ Thuộc tính văn bản, phơng chữ vị trí văn điều chỉnh giá trị tọa độ tương đối hay tuyệt đối thành phần ‘tspan’ Một số thuộc tính thành phần ‘tspan’: • Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’, thuộc tính thiết lập phơng chữ, canh lề nội dung văn tương tự thuộc tính thành phần ‘text’ Ngồi ra, ‘tspan’ cịn có tính chất khác khơng trình bày 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 màu đỏ Example tspan01 - using tspan to change visual attributes You are not a banana Kết trình duyệt : Hình 3.30 Minh họa thành phần ‘tspan’ Ví dụ 2: Ví dụ sau dùng thuộc tính ‘dx’ ‘dy’ thành phần ‘tspan’ để hiệu chỉnh vị trí văn cho chuỗi văn đặc biệt thành phần ‘text’ Example tspan02 - using tspan's dx and dy attributes for incremental positioning adjustments But you are a peach! 129 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt : Hình 3.31 Minh họa thành phần ‘tspan’ có vị trí đặc biệt Ví dụ 3: Ví dụ sau dùng thuộc tính ‘x’ ‘y’ thành phần ‘tspan’ để thiết lập vị trí cho kí tự chuỗi Ví dụ hiển thị hai dòng thành phần ‘text’ Example tspan03 using tspan's x and y attributes for multiline text and precise glyph positioning Cute and fuzzy 130 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt: Hình 3.32 Minh họa thành phần ‘tspan’ thiết lập vị trí cho kí tự chuỗi 3.16.6 Thành phần ‘tref’ Nội dung văn thành phần ‘text’ liệu kí tự nhúng trực tiếp thành phần ‘text’, nội dung liệu văn thành phần tham chiếu Tham chiếu thực thành phần ‘tref’, thành phần ‘tref’ thành phần ‘text’ Một số thuộc tính thành phần ‘tref’: • xlink:href = “” Một tham chiếu URI tới thành phần hay phân đoạn phân đoạn tài liệu SVG mà nội dung liệu kí tự (thành phần tham chiếu) dùng liệu kí tự thành phần ‘tref’ • Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’ có ý nghĩa với thuộc tính tương ứng thành phần ‘tspan’ Các thuộc tính dùng thể thành phần ‘tref’ thay bới thành phần ‘tspan’, liệu kí tự tham chiếu nhúng vào thành phần ‘tspan’ giả thuyết Ví dụ 1: Ví dụ sau minh hoạ cách dùng liệu kí tự từ thành phần khác liệu kí tự thành phần ‘tspan’ cho sẵn Thành phần ‘text’ có id = “ReferencedText” khơng hiển thị 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 131 Chương Cấu trúc định dạng tập tin SVG thành phần ‘tref’ tham chiếu tới thành phần có ‘text’ khác (có id = “ReferencedText”, liệu kí tự “Referenced character data”) Referenced character data Example tref01 - inline vs reference text content Inline character data Kết trình duyệt: Hình 3.33 Minh họa thành phần ‘tref’ 3.17 Vẽ chữ dọc theo đường 3.17.1 Giới thiệu: Ngoài khả vẽ chữ hàng thẳng, SVG hỗ trợ khả vẽ chữ dọc theo hình dáng thành phần ‘path’ Để định chuỗi hiển thị dọc 132 Chương Cấu trúc định dạng tập tin SVG theo hình dạng thành phần ‘path’, ta dùng thành phần ‘textPath’ Thành phần có thuộc tính ‘xink:href’ chứa tham chiếu URI tới thành phần ‘path’ dùng làm khung cho nội dung văn hiển thị (thành phần ‘path’ khơng hiển thị hình ) 3.17.2 Thành phần ‘textPath’ Một số thuộc tính thành phần ‘textPath’ startOffset= “” Dùng xác định vị trí bắt đầu vẽ chữ ‘path’, khoảng cách từ vị trí đầu đường đến vị trí bắt đầu vẽ chữ, tính thuật tốn tính khoảng cách tác nhân người dùng Thuộc tính nhận giá trị phần trăm (%) Khi ‘startOffset’ phần trăm độ dài toàn đường Nếu startOffset= “0%” định vị trí bắt đầu ‘path’ startOffset= “100%” tương đương với vị trí kết thúc ‘path’ Khơng nhận giá trị âm Giá trị mặc định “0” method = “align| strech” Thuộc tính dùng để định phương thức hiển thị chữ spacing = “auto | exact” Dùng xác định khoảng cách kí tự hiển thị dọc theo đường Giá trị mặc định ‘auto’ định tác nhân người dùng sử dụng thuật toán hiển thị chữ đường để chỉnh khoảng cách kí tự đẹp Thuộc tính nhận giá trị số nguyên để định khoảng cách kí tự 133 Chương Cấu trúc định dạng tập tin SVG xlink:href = “” Tham chiếu URI tới thành phần ‘path’ mà kí tự hiển thị dọc theo Nếu tham chiếu khơng hợp lệ (ví dụ, thành phần tham chiếu không tồn thành phần tham chiếu khơng phải thành phần ‘path’) gây lỗi tồn nội dung không tác nhân người dùng hiển thị Các toạ độ liệu đường (path data) thành phần ‘path’ tham chiếu tính theo đơn vị hệ trục toạ độ thành phần ‘text’, mà khơng theo tính theo đơn vị hệ trục toạ độ nơi thành phần ‘path’ định nghĩa Thuộc tính ‘transform’ thành phần ‘path’ tham chiếu cung cấp phép biến đổi bổ sung Ví dụ: Text path1 d=" " along Nó tương đương với định nghĩa sau: 134 d=" " Chương Cấu trúc định dạng tập tin SVG Text along Như dịng transform="translate(25,25)" khơng ảnh hưởng tới thành phần ‘textPath’ Ngược lại đoạn tài liệu thứ hai, dòng transform="rotate(45)" ảnh hưởng tới hai thành phần ‘text’ ‘path’ Ví dụ 1: Ví dụ đơn giản sau vẽ chữ dọc theo đường Example toap01 - simple text on a path We go up, then we go down, then up again 135 Chương Cấu trúc định dạng tập tin SVG Kết 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’ dùng thành phần ‘textPath’ để điều chỉnh thuộc tính định kiểu hiệu chỉnh lại toạ độ văn trước xây dựng nét vẽ cụ thể Từ “up” tô đỏ nâng lên cao nhờ thuộc tính ‘dy’ thành phần ‘tspan’ Example toap02 - tspan within textPath We go up , then we go down, then up again 136 Chương Cấu trúc định dạng tập tin SVG Kết trình duyệt: Hình 3.35 Minh họa thành phần ‘textPath’ có sử dụng thuộc tính ‘tspan’ Ví dụ 3: Minh hoạ cách sử dụng thuộc tính ‘startOffset’ thành phần ‘textPath’ để định vị trí bắt đầu chuỗi văn thành phần ‘path’ Chú ý nét vẽ vượt khỏi điểm cuối đường khộng hiển thị Example toap03 text on a path with startOffset attribute We go up, then we go down, then up again Kết trình duyệt: Hình 3.36 Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’ 3.18 Khả ảnh động SVG - thành phần ‘animate’ 3.18.1 Giới thiệu SVG hỗ trợ khả thay đổi ảnh đồ hoạ véc-tơ theo thời gian Nội dung SVG thay đổi động theo cách sau: • Dùng thành phần “ảnh động” SVG Phân đoạn tài liệu SVG mơ tả thay đổi dựa theo thời gian cho thành phần tài liệu Bằng cách dùng thành phần ảnh động khác nhau, định nghĩa chuyển động theo đường, hiệu ứng sáng mờ đi, đối tượng lớn lên, nhấp nháy, quay thay đổi màu… • Dùng SVG DOM Mỗi thuộc tính trang định kiểu truy cập script, SVG đưa tập giao diện DOM hỗ trợ tạo ảnh động script Kết loại ảnh động tạo Khả định (timer) ngơn ngữ viết script, ECMAScript, dùng để kích hoạt kiểm sốt ảnh động • SVG thiết kế để phiên tương lai SMIL dùng nội dung SVG tĩnh hay động thành phần phương tiện truyền thông 138 Chương Cấu trúc định dạng tập tin SVG • Trong tương lai, phiên SMIL mơ-đun hố thành phần dùng kết hợp với văn phạm SVG văn phạm XML khác để đạt 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 SVG 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 W3C), 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 đặc tả ảnh động SMIL (SMIL Animation) cung cấp tập tính năng ảnh động XML cho mục đích chung SVG kết hợp tính động định nghĩa đặc tả SMIL Animation, đồng thời bổ sung số mở rộng đặc trưng SVG 3.18.2.2 Mối quan hệ ảnh động SVG với SMIL Animation SVG “ngôn ngữ chủ” (host language) SMIL Animation Do có ràng buộc tính bổ sung cho phép đặc tả SMIL Animation Ngoài quy tắc đặc trưng SVG đề cập tường minh phần đặc tả này, cịn có định nghĩa chuẩn cho thành phần ảnh động SVG thuộc tính nằm đặc tả SMIL Animation SVG hỗ trợ thành phần ảnh động sau, định nghĩa đặc tả SMIL Animation: • ‘animate’: cho phép thuộc tính vơ hướng nhận giá trị khác theo thời gian 139 ... font = [ [ || || ]? [ / ]? ] |caption | icon | menu | message-box| small-caption | status-bar | inherit... ... standalone="no"?>