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 ngồ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
tố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.
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’