3.16 Thành phần ‘text’
3.16.4 Thuộc tính canh lề
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!
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"
"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>
<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
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
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>
<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’
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>
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"
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’