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’. Ngồ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"
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’
130
</tspan> (adsbygoogle = window.adsbygoogle || []).push({});
</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"
"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 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>
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
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"
"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" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="ReferencedText"> Referenced character data </text>
</defs> (adsbygoogle = window.adsbygoogle || []).push({});
<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:
Ngồ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’
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 tố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 tồ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 tố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ự.
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à tồ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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g transform="translate(25,25)"> <defs> (adsbygoogle = window.adsbygoogle || []).push({});
<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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g transform="rotate(45)"> <defs>
<path id="path1" transform="scale(2)" d="..." fill="none" stroke="red"/>
</defs> <text>
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"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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>
136 Kết quả trên trình duyệt là:
Hình 3.34. Minh họa thành phần ‘textPath’ (adsbygoogle = window.adsbygoogle || []).push({});
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"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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>
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"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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" (adsbygoogle = window.adsbygoogle || []).push({});
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 số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.
139
• Trong tương lai, phiên bản mới của SMIL sẽ được mơ-đun hố 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.