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).
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
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.
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). Ngồ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>
126 Kết quả trên trình duyệt: