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

"
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
xmlns=" 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"
"
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns=" 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"
"
<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=" 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"
"
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns=" 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’








Chương 3. Cấu trúc định dạng tập tin SVG
130

</tspan>
</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ụ 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’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns=" version="1.1">
<desc>Example tspan03 - using tspan's x and y
attributes
for multiline text and precise glyph
positioning</desc>
<g font-family="Verdana" font-size="45" >
<text fill="rgb(255,164,0)" >
<tspan x="300 350 400 450 500 550 600 650" y="100">
Cute and
</tspan>
<tspan x="375 425 475 525 575" y="200">
fuzzy
</tspan>
</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>

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









Chương 3. Cấu trúc định dạng tập tin SVG
131


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

3.16.6 Thành phần ‘tref’
Nội dung văn bản của thành phần ‘text’ có thể là dữ liệu kí tự được nhúng trực
tiếp trong thành phần ‘text’, hoặc cũng có thể là nội dung dữ liệu văn bản của một
thành phần được tham chiếu. Tham chiếu này được thực hiện bởi thành phần ‘tref’,
thành phần ‘tref’ này là con của thành phần ‘text’.
Một số thuộc tính của thành phần ‘tref’:
• xlink:href = “<uri>”
Một tham chiếu URI tới một thành phần hay phân đoạn trong một phân
đoạn tài liệu SVG mà nội dung dữ liệu kí tự của nó (thành phần được
tham chiếu) sẽ được dùng như dữ liệu kí tự của thành phần ‘tref’.
• Thuộc tính ‘x’, ‘y’, ‘dx’, ‘dy’, ‘rotate’ có cùng ý nghĩa với các thuộc
tính tương ứng của thành phần ‘tspan’. Các thuộc tính này được dùng
như thể thành phần ‘tref’ được thay thế bới một thành phần ‘tspan’,
trong đó d
ữ liệu kí tự được tham chiếu sẽ được nhúng vào trong thành
phần ‘tspan’ giả thuyết này.

Ví dụ 1
: Ví dụ sau minh hoạ cách dùng dữ liệu kí tự từ một thành phần khác
như là dữ liệu kí tự của một thành phần ‘tspan’ cho sẵn. Thành phần ‘text’ có id =
“ReferencedText” sẽ không được hiển thị vì nó là con của thành phần ‘defs’. Thành
phần ‘text’ thứ hai hiển thị chuỗi : “Inline character data”. Thành phần ‘text’ thứ ba
hiển thị chuỗi “Referenced character data”. Nó (thành phần ‘text’ thứ ba) chứa một

Hình 3.32. Minh họa thành phần ‘tspan’ thiết lập vị trí
mới cho mỗi kí tự trong chuỗi








Chương 3. Cấu trúc định dạng tập tin SVG
132

thành phần ‘tref’ tham chiếu tới một thành phần có ‘text’ khác (có id =
“ReferencedText”, và dữ liệu kí tự là “Referenced character data”).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
xmlns=" version="1.1"
xmlns:xlink="
<defs>
<text id="ReferencedText">

Referenced character data
</text>
</defs>
<desc>Example tref01 - inline vs reference text
content</desc>
<text x="100" y="100" font-size="45" fill="blue" >
Inline character data
</text>
<text x="100" y="200" font-size="45" fill="red" >
<tref xlink:href="#ReferencedText"/>
</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>

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

3.17 Vẽ chữ dọc theo một đường
3.17.1 Giới thiệu:
Ngoài khả năng vẽ chữ trên một hàng thẳng, SVG còn hỗ trợ khả năng vẽ chữ
dọc theo hình dáng của một thành phần ‘path’. Để chỉ định một chuỗi hiển thị dọc

Hình 3.33. Minh họa thành phần ‘tref’









Chương 3. Cấu trúc định dạng tập tin SVG
133

theo hình dạng của một thành phần ‘path’, ta dùng thành phần ‘textPath’. Thành
phần này có một thuộc tính ‘xink:href’ chứa một tham chiếu URI tới một thành
phần ‘path’ sẽ được dùng làm khung cho nội dung văn bản hiển thị trên đó (thành
phần ‘path’ này không được hiển thị trên màn hình ).
3.17.2 Thành phần ‘textPath’
Một số thuộc tính của thành phần ‘textPath’
startOffset= “<lenght>”
Dùng xác định vị trí bắt đầu vẽ chữ trên ‘path’, chính là khoảng cách từ
vị trí đầu đường đến vị trí bắ
t đầu vẽ chữ, được tính bằng thuật toán
tính khoảng cách của tác nhân người dùng.
Thuộc tính này có thể nhận giá trị phần trăm (%) . Khi đó ‘startOffset’
là phần trăm độ dài của toàn bộ đường. Nếu startOffset= “0%” chỉ định
vị trí bắt đầu của ‘path’ và startOffset= “100%” tương đương với vị trí
kết thúc của ‘path’.
Không nhận giá trị âm. Giá trị mặc định là “0”.
method = “align| strech”
Thuộc tính này dùng để chỉ định phương thức hi
ển thị chữ.
spacing = “auto | exact”
Dùng xác định khoảng cách giữa các kí tự được hiển thị dọc theo
đường.
Giá trị mặc định là ‘auto’ chỉ định tác nhân người dùng sử dụng thuật
toán hiển thị chữ trên đường để chỉnh khoảng cách của các kí tự là đẹp
nhất.

Thuộc tính này có thể nhận một giá trị số nguyên để chỉ định khoảng
cách giữa các kí tự.








Chương 3. Cấu trúc định dạng tập tin SVG
134

xlink:href = “<uri>”
Tham chiếu URI tới một thành phần ‘path’ mà các kí tự sẽ hiển thị dọc
theo đó. Nếu <uri> là một tham chiếu không hợp lệ (ví dụ, thành phần
được tham chiếu không tồn tại hoặc thành phần được tham chiếu không
phải là thành phần ‘path’) thì nó gây ra lỗi và toàn bộ nội dung sẽ
không được tác nhân người dùng hiển thị.
Các toạ độ trong dữ liệu đường (path data) của thành phần ‘path’ được tham
chiếu được tính theo đơn vị
của hệ trục toạ độ như của thành phần ‘text’, mà không
theo tính theo đơn vị của hệ trục toạ độ nơi thành phần ‘path’ được định nghĩa.
Thuộc tính ‘transform’ của thành phần ‘path’ được tham chiếu cung cấp một phép
biến đổi bổ sung.
Ví dụ
:
<svg xmlns="
xmlns:xlink="
version="1.1">

<g transform="translate(25,25)">
<defs>
<path id="path1" transform="scale(2)" d=" "
fill="none" stroke="red"/>
</defs>
</g>
<text transform="rotate(45)">
<textPath xlink:href="#path1">Text along
path1</textPath>
</text>
</svg>

Nó tương đương với định nghĩa sau:
<svg xmlns="
xmlns:xlink="
version="1.1">
<g transform="rotate(45)">
<defs>
<path id="path1" transform="scale(2)" d=" "
fill="none" stroke="red"/>
</defs>
<text>









Chương 3. Cấu trúc định dạng tập tin SVG
135

<textPath xlink:href="#path1">Text along
path1</textPath>
</text>
</g>
</svg>

Như vậy dòng
transform="translate(25,25)" không ảnh hưởng tới
thành phần ‘textPath’. Ngược lại trong đoạn tài liệu thứ hai, dòng
transform="rotate(45)"
ảnh hưởng tới cả hai thành phần ‘text’ và ‘path’.
Ví dụ 1
: Ví dụ đơn giản sau vẽ chữ dọc theo đường
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"
version="1.1"
xmlns="
xmlns:xlink="
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>

<desc>Example toap01 - simple text on a path</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5"
fill="blue" >
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</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
136

Kết quả trên trình duyệt là:
Hình 3.34. Minh họa thành phần ‘textPath’

Ví dụ 2
: Thành phần ‘tspan’ được dùng trong thành phần ‘textPath’ để điều
chỉnh thuộc tính định kiểu và hiệu chỉnh lại toạ độ văn bản hiện tại trước khi xây
dựng một nét vẽ cụ thể. Từ “up” sẽ được tô đỏ và được nâng lên cao nhờ thuộc tính
‘dy’ trong thành phần ‘tspan’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"
version="1.1"
xmlns="
xmlns:xlink="
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Example toap02 - tspan within textPath</desc>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5"
fill="blue" >
<textPath xlink:href="#MyPath">
We go
<tspan dy="-30" fill="red" >
up
</tspan>
<tspan dy="30">
,

</tspan>
then we go down, then up again
</textPath>
</text>








Chương 3. Cấu trúc định dạng tập tin SVG
137

<! 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:
Hình 3.35. Minh họa thành phần ‘textPath’ có sử dụng thuộc tính ‘tspan’
Ví dụ 3
: Minh hoạ cách sử dụng thuộc tính ‘startOffset’ trên thành phần
‘textPath’ để chỉ định vị trí bắt đầu của chuỗi văn bản trên thành phần ‘path’. Chú ý
rằng các nét vẽ vượt ra khỏi điểm cuối của đường sẽ khộng được hiển thị.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="3.6cm" viewBox="0 0 1000
300" version="1.1"

xmlns="
xmlns:xlink="
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<desc>Example toap03 - text on a path with
startOffset attribute</desc>
<use xlink:href="#MyPath" fill="none" stroke="red"
/>
<text font-family="Verdana" font-size="42.5"
fill="blue" >
<textPath xlink:href="#MyPath" startOffset="80%">
We go up, then we go down, then up again
</textPath>
</text>
<! Show outline of canvas using 'rect' element >
<rect x="1" y="1" width="998" height="298"








Chương 3. Cấu trúc định dạng tập tin SVG

138

fill="none" stroke="blue" stroke-width="2" />
</svg>
Kết quả trên trình duyệt:
Hình 3.36. Minh họa thành phần ‘textPath’ sử dụng thuộc tính ‘startOffset’
3.18 Khả năng ảnh động của SVG - thành phần ‘animate’
3.18.1 Giới thiệu
SVG hỗ trợ khả năng thay đổi ảnh đồ hoạ véc-tơ theo thời gian. Nội dung
SVG có thể thay đổi động theo các cách sau:
• Dùng thành phần “ảnh động” của SVG. Phân đoạn tài liệu SVG có thể
mô tả các thay đổi dựa theo thời gian cho các thành phần của tài liệu.
Bằng cách dùng các thành phần ảnh động khác nhau, chúng ta có thể
định nghĩa các chuyển động theo đườ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 tập các giao diện DOM hỗ trợ tạo
ảnh động bằng script. Kết quả là bất kỳ loại ảnh động nào đều có thể
được tạo ra. Khả năng định giờ (timer) bằng ngôn ngữ viết script, như
ECMAScript, có thể được dùng để kích hoạt và kiểm soát ảnh động.
• SVG được thiết kế để các phiên bản trong tương lai của SMIL dùng nội
dung SVG tĩnh hay động như những thành phần phương tiện truyền
thông.









Chương 3. Cấu trúc định dạng tập tin SVG
139

• Trong tương lai, phiên bản mới của SMIL sẽ được mô-đun hoá và các
thành phần của nó có thể được dùng kết hợp với văn phạm SVG và văn
phạm XML khác để đạt được các hiệu ứng động.
3.18.2 Các thành phần ảnh động
3.18.2.1 Tổng quan
Các thành phần ảnh động của SVG được hợp tác phát triển với nhóm phát
triển SYMM (W3C Synchronized Multimedia Working Group – nhóm phát triển đa
phương tiện đồng bộ W3C), và các nhà phát triển SMIL 1.0 (Synchronized
Multimedia Integration Languge1.0 Specification – ngôn ng
ữ tích hợp đa phương
tiện không đồng bộ).
Nhóm phát triển SYMM hợp tác với nhóm phát triển SVG đã tạo ra bản đặc tả
ảnh động SMIL (SMIL Animation) cung cấp một tập tính năng năng ảnh động
XML cho mục đích chung. SVG kết hợp các tính năng động được định nghĩa trong
đặc tả SMIL Animation, đồng thời bổ sung một số mở rộng đặc trưng SVG.
3.18.2.2 Mối quan hệ của ả
nh động SVG với SMIL Animation
SVG là một “ngôn ngữ chủ” (host language) của SMIL Animation. Do đó nó
có các ràng buộc và các tính năng bổ sung được cho phép bởi đặc tả SMIL
Animation. Ngoài các quy tắc đặc trưng SVG được đề cập tường minh trong phần
đặc tả này, còn có các định nghĩa chuẩn cho các thành phần ảnh động của SVG và
các thuộc tính nằm trong đặc tả SMIL Animation.
SVG hỗ trợ các thành phần ảnh động sau, được định nghĩa trong đặc tả SMIL
Animation:
• ‘animate’: cho phép các thu

ộc tính vô hướng nhận các giá trị khác
nhau theo thời gian.