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

Chương 3. Cấu trúc định dạng tập tin SVG 120 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd "> <svg width="236" height="295"> <defs> <clipPath id="clipRecorte"> <path d="M0,0 L100,0 L100,100 L0,100 Z" /> </clipPath> </defs> <image width="236" height="295" xlink:href="a.gif" opacity="0.3" /> <image width="236" height="295" xlink:href="a.png" clip-path="url(#clipRecorte)" /> <rect id="filtered" width="100" height="100" style="fill: red; fill-opacity: 0; stroke: red; stroke-width: 1; shape-rendering: optimizeSpeed;" /> </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’ Chương 3. Cấu trúc định dạng tập tin SVG 121 3.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àu viề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ẳng hạ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ết có thể thay đổi, và đường viề n của hình (là đường mở hoặc đóng) sẽ được vẽ bằng cá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 = “<number>” Độ 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ứa các chỉ thị “moveto”, “line”, “curve”, “closepath” và các toạ độ trong hệ trục toạ độ người dùng hiện tại. Chương 3. Cấu trúc định dạng tập tin SVG 122 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”. <?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="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Example triangle01- simple example of a 'path'</title> <desc>A path that draws a triangle</desc> <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" /> <path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> </svg> 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ành phầ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 cho thành phần ‘text’ giống như cho các thành phần hình học (đường và hình chữ nhật chẳng hạn). Chương 3. Cấu trúc định dạng tập tin SVG 123 SVG không tự động xuống dòng khi hiển thị văn bản. Để hiển thị nhiều dòng chú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àng thẳ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ăng hiể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 Chương 3. Cấu trúc định dạng tập tin SVG 124 chữ, màu. Thành phần ‘text’ dùng cùng phương thức xây dựng (render) như các thà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ản hiện tại khởi tạo (initial curent text position). Vị trí này được thiết lập bởi thuộc tí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 thuộc tính ‘text-anchor’, sự có mặt c ủa thành phần ‘textPath’ chứa kí tự đầu tiên, và/hoặc giá trị của thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’ trên thành phần ‘tspan’, ‘tref’ hoặc ‘altGlyph’ chứa kí tự đầu tiên. Sau khi nét vẽ tương ứng với kí tự cho sẵn được xây dựng xong, vị trí văn bản hiện tại được cập nhật cho kí tự kế tiếp.Trong trường hợp đơn giản nhất, vị trí văn bản hiện tại bằng vị trí hiện tại trước đó cộng với giá trị tăng lên do nét vẽ gây ra (theo chiều ngang hay chiều dọc). Một số thuộc tính của thành phần ‘text’: • x = “<coordinate>+” Nếu một <coordinate> được cung cấp thì giá trị này cho biết toạ độ X tuyệt đối của vị trí văn bản hiện tại. Vị trí này được dùng để xây dựng các nét vẽ tương ứng với kí tự đầu tiên trong thành phần ‘text’ này hoặc bất kỳ thành phần con nào khác của nó. N ếu một mảng gồm <n> phần tử <coordinate> được cung cấp thì các giá trị này cho biết các toạ độ X của vị trí văn bản hiện tại. Các vị trí này được dùng để xây dựng các nét vẽ tương ứng với <n> kí tự ban đầu trong thành phần ‘text’ này hoặc bất kỳ thành phần con của nó. Giá trị mặc định là “0” • y = “<coordinate>+” Xử lý như thuộc tính ‘x’ nhưng trên trục y. • dx = “<length>” Chương 3. Cấu trúc định dạng tập tin SVG 125 Thiết lập độ dịch chuyển dọc theo trục x so với vị trí văn bản hiện tại cho các kí tự trong thành phần ‘text’ này hay bất kỳ thành phần con nào của nó. • dy = “<length>” Tác dụng như thuộc tính ‘dx’ nhưng trên trục y. • rotate = “<number>+” Thiết lập góc quay của các nét vẽ tương ứng với các kí tự quanh vị trí văn bản hiện tại. Thuộc tính “text-anchor” và “font-family” dùng để canh lề và thiết lập phông chữ cho ph ần văn bản trong thành phần “text” (sẽ được trình bày sau). Ngoài ra, một số thuộc tính khác nữa cũng được sử dụng nhưng không được mô tả ở đây. Ví dụ 1 : Xuất chuỗi “Hello, out there” trên phông nền, dùng phông chữ Verdana và tô các nét vẽ màu xanh. <?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 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example text01 - 'Hello, out there' in blue</desc> <text x="250" y="150" font-family="Verdana" font-size="55" fill="blue" > Hello, out there </text> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg> Chương 3. Cấu trúc định dạng tập tin SVG 126 Kết quả trên trình duyệt: 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 bản (thành phần ‘text’, ‘tspan’, ‘tref’). font-family = [[ <family-name> |<generic-family> ],]* [<family-name> |<generic- family>] | inherit Thuộc tính này dùng để chỉ định họ phông chữ được dùng để hiển thị văn bản. font-style = normal | italic | oblique | inherit Thuộc tính này dùng để chỉ định kiểu hiển thị văn bản là bình thường (normal), nghiên (italic), hay trong suốt (oblique). font-variant = normal | small-caps | inherit Thuộc tính này dùng để chỉ định văn bản hiển thị dưới 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 này dùng để chỉ định độ lớn, nhỏ của nét vẽ tương ứng với các phông chữ khác nhau trong cùng một họ. Hình 3.29 Minh họa thành phần ‘text’ Chương 3. Cấu trúc định dạng tập tin SVG 127 font-size = <absolute-size> | <relative-size> |<length> | <percentage> | inherit Thuộc tính này dùng để chỉ định kích thước phông chữ hiển thị cho văn bản. Trong tài liệu SVG, nếu <length> được cung cấp mà không có đơn vị chỉ định (ví dụ, giá trị 128) thì tác nhân người dùng hiểu <length> là giá trị chiều cao của chữ trong hệ trục toạ độ người dùng hiện tại. Nếu <length> được cung cấp với một đơn vị chỉ định cụ thể (ví dụ, 12pt ho ặc 10%), thì tác nhân người dùng sẽ chuyển <length> sang giá trị tương ứng trong hệ trục toạ độ người dùng hiện tại. font-size-adjust = <number> | none | inherit Thuộc tính này dùng để chỉ định giá trị riêng cho một thành phần để bảo toàn chiều cao của phông chữ được chọn đầu tiên trong phông chữ thay thế. font = [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?<'font-size'> [ / <'line-height'> ]? <'font-family'> ] |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 của nét chữ), ‘font-size’ (kích thước chữ), ‘line-height’ (được hiển là ‘font-size’) và ‘font-family’ (họ phông chữ). Định nghĩa chi tiết của các thuộc tính này trong đặc tả trang định kiểu phân cấp (CSS) (không được trình bày ở đây). 3.16.4 Thuộc tính canh lề Trong phạm vi đề tài, chỉ có thuộc tính canh lề ‘text-anchor’ được xét đến. Chương 3. Cấu trúc định dạng tập tin SVG 128 Thuộc tính ‘text-anchor’ được dùng để canh lề cho chuỗi văn bản tương đối so với điểm cho trước. Thuộc tính ‘text-anchor’ nhận một trong các giá trị sau “start”, “middle”, “end”, “inherit”. Mặc định là “start”. Ý nghĩa của các giá trị: • start Vị trí bắt đầu chuỗi trùng với vị trí văn bản hiện tại khởi tạo. • middle Vị trí giữa của chuỗi văn bản trùng với vị trí văn bả n hiện tại khởi tạo. • end Vị trí cuối chuỗi trùng với vị trí văn bản hiện tại khởi tạo. 3.16.5 Thành phần ‘tspan’ Thành phần ‘tspan’ là thành phần con trong thành phần ‘text’. Thuộc tính văn bản, phông chữ và vị trí văn bản hiện tại có thể được điều chỉnh bằng các giá trị tọa độ tương đối hay tuyệt đối trong thành phần ‘tspan’. Một số thuộc tính củ a thành phần ‘tspan’: • Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’, các thuộc tính thiết lập phông chữ, canh lề nội dung văn bản thì tương tự như các thuộc tính của thành phần ‘text’. Ngoài ra, ‘tspan’ còn có các tính chất khác nhưng không được trình bày trong 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 và màu đỏ. <?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 1000 300" Chương 3. Cấu trúc định dạng tập tin SVG 129 xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example tspan01 - using tspan to change visual attributes</desc> <g font-family="Verdana" font-size="45" > <text x="200" y="150" fill="blue" > You are <tspan font-weight="bold" fill="red" >not</tspan> a banana. </text> </g> <! Show outline of canvas using 'rect' element > <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg> Kết quả trên trình duyệt : Ví dụ 2 : Ví dụ sau dùng thuộc tính ‘dx’ và ‘dy’ trên thành phần ‘tspan’ để hiệu chỉnh vị trí văn bản hiện tại cho chuỗi văn bản đặc biệt trong thành phần ‘text’. <?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 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example tspan02 - using tspan's dx and dy attributes for incremental positioning adjustments</desc> <g font-family="Verdana" font-size="45" > <text x="200" y="150" fill="blue" > But you <tspan dx="2em" dy="-50" font-weight="bold" fill="red" > are </tspan> <tspan dy="100"> a peach! Hình 3.30. Minh họa thành phần ‘tspan’ [...]... version="1.0" standalone="no"?> Example tspan03 using tspan's x and y attributes for multiline text and precise glyph positioning . dạng tập tin SVG 120 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC -SVG- 20010904/DTD /svg1 0.dtd ">. đường, hiệu ứng sáng và mờ đi, các đối t ượng lớn lên, nhấp nháy, quay và thay đổi màu…. • Dùng SVG DOM. Mỗi thuộc tính và trang định kiểu có thể được truy cập bằng script, và SVG đưa ra một. <'font-style'> || <'font-variant'> || <'font-weight'> ]?<'font-size'> [ / <'line-height'> ]? <'font-family'>