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

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’120Chương 3. Cấu trúc định dạng tập tin SVG3.15 Thành phần ‘path’3.15.1
Nội dung trích xuất từ tài liệu:
TÌM HIỂU SVG VÀ ỨNG DỤNG - 7Chươ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ậtclipRecorte: Hình 3.27 Minh họa thành phần ‘clipPath’ 120Chương 3. Cấu trúc định dạng tập tin SVG3.15 Thành phần ‘path’3.15.1 Giới thiệu ‘Path’ (đường) có thể là đường viền của một hình tô màu được, hoặc là màuviề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ẳnghạ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ếtcó thể thay đổi, và đường viền của hình (là đường mở hoặc đóng) sẽ được vẽ bằngcá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 = “” Độ 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ứacác chỉ thị “moveto”, “line”, “curve”, “closepath” và các toạ độ trong hệ trục toạ độngười dùng hiện tại. 121Chương 3. Cấu trúc định dạng tập tin SVG 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”. Example triangle01- simple example of a path A path that draws a triangle Kết quả trên 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 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ànhphầ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 chothành phần ‘text’ giống như cho các thành phần hình học (đường và hình chữ nhậtchẳng hạn). 122Chương 3. Cấu trúc định dạng tập tin SVG SVG không tự động xuống dòng khi hiển thị văn bản. Để hiển thị nhiều dòngchú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àngthẳ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ănghiể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 123Chương 3. Cấu trúc định dạng tập tin SVGchữ, màu. Thành phần ‘text’ dùng cùng phương thức xây dựng (render) như cácthà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ảnhiện tại khởi tạo (initial curent text position). Vị trí này được thiết lập bởi thuộctí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 ...