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

Để 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

Trang 1

<?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 ">

<defs>

</clipPath>

</defs>

<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’

Trang 2

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

Trang 3

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"?>

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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)

Trang 4

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

Trang 5

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>”

Trang 6

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

<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 >

fill="none" stroke="blue" stroke-width="2" />

</svg>

Trang 7

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> 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’

Trang 8

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'> [ /

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

Trang 9

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 đỏ

Trang 10

<desc>Example tspan01 - using tspan to change visual attributes</desc>

You are

a banana

</text>

</g>

</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’

<desc>Example tspan02 - using tspan's dx and dy attributes

for incremental positioning adjustments</desc>

But you

are

</tspan>

a peach!

Hình 3.30 Minh họa thành phần ‘tspan’

Trang 11

</tspan>

</text>

</g>

</svg>

Kết quả trên trình duyệt :

Ví dụ 3: Ví dụ sau dùng thuộc tính ‘x’ và ‘y’ trên thành phần ‘tspan’ để thiết

lập vị trí mới cho mỗi kí tự trong chuỗi Ví dụ này hiển thị hai dòng trong cùng một thành phần ‘text’

<desc>Example tspan03 - using tspan's x and y attributes

for multiline text and precise glyph positioning</desc>

<tspan x="300 350 400 450 500 550 600 650" y="100"> Cute and

</tspan>

fuzzy

</tspan>

</text>

</g>

</svg>

Hình 3.31 Minh họa thành phần ‘tspan’ có một vị trí đặc biệt

Định dạng
Số trang	20
Dung lượng	618,11 KB