TÌM HIỂU SVG VÀ ỨNG DỤNG - 6 pot

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (603.37 KB, 20 trang )

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

là nó thiết lập một hệ trục toạ độ mới cho tất cả các thuộc tính khác và cho các
thành phần con của thành phần chứa tính ‘viewBox’.
3.12.7 Thuộc tính ‘preserveAspectRatio’
Trong một số trường hợp, khi sử dụng thuộc tính ‘viewBox’, người ta muốn
các hình hiển thị trải rộng toàn khung nhìn không cần đảm bảo tỉ lệ cạnh của hình
(hình hiển thị trong khung nhinh có khi bị kéo dài hay thu hẹp theo một trục toạ độ).
Trong một số tr
ường hợp khác thì lại muốn các cạnh co dãn với cùng tỉ lệ để đảm
bảo tỉ lệ cạnh của hình (hình mới đồng dạng với hình nguyên thủy).
Thuộc tính ‘preserveAspectRatio= “[defer]<align>[<meetOrSlice>]”, chỉ áp
dụng trong các thành phần thiết lập khung nhìn mới, thành phần ‘marker’, ‘pattern’,
‘view’, dùng để chỉ định có cần co dãn tỉ lệ các chiều đồng nhất hay không. Thuộc
tính ‘preserveAspectRatio’ chỉ dùng khi thuộc tính ‘viewBox’ được thiết lập, ngược
lại thuộc tính này bị b
ỏ qua.
Đối với thành phần ‘image’, thuộc tính ‘preserveAspectRatio’ trên thành phần
‘image’ xác định có cần bảo toàn tỉ lệ cạnh của ảnh được tham chiếu khi hiển thị
hay không.
Nếu giá trị của thuộc tính ‘preserveAspectRatio’ trên thành phần ‘image’ bắt
đầu với giá trị ‘defer’ thì giá trị của thuộc ‘preserveAspectRatio’ (nếu có) trong nội

dung được tham chiếu sẽ được dùng . Nếu nội dung được tham chiếu không có giá
trị thuộc tính ‘preserveAspectRatio’ thì thuộc tính ‘preserveAspectRatio’ trên thành
phần ‘image’ sẽ được xử
lý bình thường – bỏ qua giá trị ‘defer’. Đối với các thành
phần khác thành phần ‘image’ thì giá trị ‘defer’ trên thuộc tính
‘preserveAspectRatio’ sẽ bị bỏ qua.
Tham số <align> (canh lề) xác định có cần đảm bảo tỉ lệ các chiều hay không,
nếu nó thuộc tính được thiết lập thì phương thức canh lề được dùng khi tỉ lệ cạnh
trong thuộc tính ‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn.
Tham số <align> phải là một trong các giá trị sau:

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

• none – không cần bảo toàn tỉ lệ cạnh. Nếu <align> nhận giá trị ‘none’
thì tuỳ chọn <meetOrSlice> sẽ bị bỏ qua.
• xMinYMin - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMidYMin-Cần bảo toàn tỉ lệ cạnh
o Giá trị X của đ

iểm giữa của ‘viewBox’ canh trùng với giá trị X
điểm giữa của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMaxYMin-Cần bảo toàn tỉ lệ cạnh
o Giá trị <min-x> + <width> của ‘viewBox’ canh trùng với giá trị
X lớn nhất của khung nhìn.
o Giá trị <min-y> của ‘viewBox’ canh trùng với giá trị Y nhỏ nhất
của khung nhìn.
• xMinYMid-Cần bảo toàn tỉ lệ cạnh
o
Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm
giữa của khung nhìn.
• xMidYMid-Cần bảo toàn tỉ lệ cạnh
o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X
điểm giữa của khung nhìn.

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

o Giá trị Y điểm giữa của ‘viewBox’ canh trùng với giá trị Y điểm

giữa của khung nhìn.
• xMaxYMid - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <max-x> của ‘viewBox’ canh trùng với giá trị X lớn nhất
của khung nhìn.
o Giá trị Y của điểm giữa của ‘viewBox’ canh trùng với giá trị Y
của điểm giữa của khung nhìn.
• xMinYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> của ‘viewBox’ canh trùng với giá trị X nhỏ nhất
của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.
• xMidYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị X của điểm giữa của ‘viewBox’ canh trùng với giá trị X
của điểm giữa của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.
• xMaxYMax - Cần bảo toàn tỉ lệ cạnh.
o Giá trị <min-x> + <width> của ‘viewBox’ canh trùng với giá trị
X lớn nhất của khung nhìn.
o Giá trị <min-y> + <height> của ‘viewBox’ canh trùng với giá trị
Y lớn nhất của khung nhìn.

Tham số <meetOrSlice> là tham số tuỳ chọn, nếu được cung cấp, nó sẽ được
tách biệt với giá trị <align> bởi một hay nhiều khoảng trắng.

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

• meet (mặc định) :
o Bảo toàn tỉ lệ cạnh
o Toàn bộ ‘viewBox’ hiển thị trong khung nhìn
o ‘viewBox’ được dãn to hết mức có thể trong khi vẫn đảm bảo
các ràng buộc khác.
Trong trường hợp này, nếu tỉ lệ cạnh của ảnh không khớp với khung
nhìn, thì khung nhìn lớn hơn ‘viewBox’.
• slice:
o Bảo toàn tỉ lệ cạnh
o ‘viewBox’ sẽ chiếm toàn bộ khung nhìn
o ‘viewBox’ đượ
c co lại nhỏ nhất có thể, trong khi vẫn đảm bảo
các ràng buộc khác
Trong trường hợp này, nếu tỉ lệ cạnh của ‘viewBox’ không khớp với
tỉ lệ cạnh của khung nhìn thì một phần của ‘viewBox’ không hiển
thị trong khung nhìn.
Ví dụ 1
:
Ví dụ sau chứng minh các tùy chọn đối với thuộc tính ‘preserveAspectRatio’.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
[ <!ENTITY Smile "
<rect x='.5' y='.5' width='29' height='39' fill='black'
stroke='red'/>

<g transform='translate(0, 5)'>
<circle cx='15' cy='15' r='10' fill='yellow'/>
<circle cx='12' cy='12' r='1.5' fill='black'/>
<circle cx='17' cy='12' r='1.5' fill='black'/>
<path d='M 10 19 A 8 8 0 0 0 20 19' stroke='black' stroke-
width='2'/>
</g>
">
<!ENTITY Viewport1 "<rect x='.5' y='.5' width='49'

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

height='29'
fill='none' stroke='blue'/>">
<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29'
height='59'
fill='none' stroke='blue'/>">
]>
<svg width="450px" height="300px" version="1.1"
xmlns="
<desc>Example PreserveAspectRatio - illustrates
preserveAspectRatio attribute</desc>

<rect x="1" y="1" width="448" height="298"
fill="none" stroke="blue"/>
<g font-size="9">
<text x="10" y="30">SVG to fit</text>
<g transform="translate(20,40)">&Smile;</g>
<text x="10" y="110">Viewport 1</text>
<g transform="translate(10,120)">&Viewport1;</g>
<text x="10" y="180">Viewport 2</text>
<g transform="translate(20,190)">&Viewport2;</g>
<g id="meet-group-1" transform="translate(100, 60)">
<text x="0" y="-30"> meet
</text>
<g><text y="-10">xMin*</text>&Viewport1;
<svg preserveAspectRatio="xMinYMin meet"
viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(70,0)"><text y="-
10">xMid*</text>&Viewport1;
<svg preserveAspectRatio="xMidYMid meet"
viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
<g transform="translate(0,70)"><text y="-
10">xMax*</text>&Viewport1;
<svg preserveAspectRatio="xMaxYMax meet"
viewBox="0 0 30 40"
width="50" height="30">&Smile;</svg></g>
</g>
<g id="meet-group-2" transform="translate(250, 60)">
<text x="0" y="-30"> meet
</text>

<g><text y="-10">*YMin</text>&Viewport2;
<svg preserveAspectRatio="xMinYMin meet"
viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
<g transform="translate(50, 0)"><text y="-
10">*YMid</text>&Viewport2;
<svg preserveAspectRatio="xMidYMid meet"
viewBox="0 0 30 40"

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

width="30" height="60">&Smile;</svg></g>
<g transform="translate(100, 0)"><text y="-
10">*YMax</text>&Viewport2;
<svg preserveAspectRatio="xMaxYMax meet"
viewBox="0 0 30 40"
width="30" height="60">&Smile;</svg></g>
</g>
<g id="slice-group-1" transform="translate(100, 220)">
<text x="0" y="-30"> slice
</text>
<g><text y="-10">xMin*</text>&Viewport2;

width="50" height="30">&Smile;</svg></g>
</g>
</g>
</svg>

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

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

Hình 3.24 Minh họa thuộc tính ‘preserveAspectRatio’
3.12.8 Thiết lập khung nhìn
Tại bất kỳ điểm nào trong hình vẽ SVG, chúng ta có thể thiết lập một khung
nhìn mới cho tất cả các thành phần chứa trong nó bằng cách thêm một thành phần
‘svg’ vào nội dung SVG. Bằng cách thiết lập một khung nhìn mới, chúng ta thiết
lập một hệ trục toạ độ khung nhìn mới, một hệ trục toạ độ người dùng mới, và cũng
có thể thêm vào một đường xén mới.
Đường bao củ
a khung nhìn mới được định nghĩa bởi thuộc tính ‘x’, ‘y’,
‘width’ và ‘height’ trong thành phần thiết lập khung nhìn mới, thành phần ‘svg’
chẳng hạn. Cả hai hệ trục toạ độ khung nhìn mới và hệ trục toạ độ người dùng có
cùng gốc toạ độ tại (x,y), x và y tương ứng với các giá trị được thiết lập trong thành

phần thiết lập khung nhìn mới. Hướng của hệ trục toạ độ khung nhìn mới và hệ trục
toạ độ người dùng mới tương ứng với hướng của hệ trục toạ độ người dùng hiện tại
đối với thành phần thiết lập khung nhìn mới này. Mỗi đơn vị trong hệ trục toạ độ

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

khung nhìn mới và hệ trục toạ độ người dùng mới cùng giá trị với đơn vị trong
khung nhìn hiện tại đối với thành phần thiết lập khung nhìn mới này.
Ví dụ 1
:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="4in" height="3in" version="1.1"
xmlns="
<desc>This SVG drawing embeds another one,
thus establishing a new viewport
</desc>
<! The following statement establishing a new viewport
and renders SVG drawing B into that viewport >
<svg x="25%" y="25%" width="50%" height="50%">
<! drawing B goes here >

</svg>
</svg>

Các thành phần có thể thiết lập khung nhìn mới:
• Thành phần ‘svg’.
• Thành phần ‘symbol’ định nghĩa một khung nhìn mới bất kỳ khi nào
được dùng cụ thể bởi thành phần ‘use’.
• Thành phần ‘image’ tham chiếu tới một tập tin SVG sẽ thiết lập một
khung nhìn tạm thời vì trong nguồn tài nguyên được tham chiếu có một
thành phần ‘svg’.
• Thành phần ‘foreignObject’ (thành phần này không được mô tả trong
phạm vi tìm hiểu) tạo một khung nhìn m
ới để hiển thị nội dung trong
thành phần này.
Nếu khung nhìn mới thiết lập một đường xén mới thì sẽ được xác định bởi giá
trị ‘overflow’ của thành phần thiết lập khung nhìn mới này. Nếu một đường xén
được tạo tương ứng với khung nhìn mới, hình dạng của đường xén được xác định
bởi giá trị của thuộc tính ‘clip’.

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

3.13 Định kiểu (styling)

3.13.1 Các thuộc tính định kiểu của SVG
SVG dùng thuộc tính định kiểu (styling properties) để mô tả cách thức các
thành phần đồ họa trong nội dung SVG được xây dựng. SVG dùng các thuộc tính
định kiểu sau:
• Tất cả các thuộc tính định nghĩa cách thức một đối tượng được vẽ như
màu tô, màu viền, độ rộng đường, nét vẽ….
• Các thuộc tính định kiểu văn bản, ‘font-family’ và ‘font-size’ ….
• Các tham số buộc các thành phần ph
ải được xậy dựng theo giá trị của
nó, như đường xén, mặt nạ, hiệu ứng lọc….
SVG dùng các thuộc tính định kiểu đặc trưng của nó và của CSS và XSL.
Trong phạm vi đề tài, chỉ có cách định kiểu bằng thuộc tính trình diễn và CSS
được xét đến, còn XSL không được đề cập đến.
3.13.2 Định kiểu dùng thuộc tính trình diễn
Các thuộc tính trình diễn như ‘fill’, ‘stroke’, ‘clip-path’… được dùng trong các
thành phần cho trước để chỉ định cách thứ
c các thành phần này được xây dựng.
Ví dụ 1
:
Ví dụ sau minh hoạ cách dùng thuộc tính ‘fill’ và ‘stroke’ cho thành phần hình
chữ nhật (‘rect’). Hình chữ nhật sẽ được tô màu đỏ và viền xanh.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
xmlns=" version="1.1">
<rect x="200" y="100" width="600" height="300"
fill="red" stroke="blue" stroke-width="3"/>
</svg>

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

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

3.13.3 Định kiểu bằng CSS
SVG hỗ trợ định kiểu bằng trang định CSS như sau:
• Trang định kiểu CSS ngoài được liên kết vào tài liệu hiện tại
• Trang định kiểu CSS nội được nhúng trong tài liệu hiện tại, trong thành
phần ‘style’ của SVG.
• Định kiểu nội tuyến, khai báo thuộc tính CSS trong thuộc tính ‘style’
của một thành phần SVG đặc biệt.
Ví dụ 1
:
Ví dụ sau minh hoạ cách sử dụng trang định kiểu CSS ngoại để thiết lập thuộc
tính ‘fill’ và ‘stroke’ trên tất cả các hình chữ nhật trong tài liệu SVG.
Trang định kiểu ngoại (mystyle.css):
rect {
fill: red;
stroke: blue;
stroke-width: 3
}

Hình 3.25 Minh họa thuộc tính ‘fill’

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

Tài liệu SVG tham chiếu tới trang định kiểu ngoài mystyle.css
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
xmlns=" version="1.1">
<rect x="10" y="10" width="300" height="300"/>
<rect x="320" y="10" width="400" height="300"/>
</svg>
Kết quả trên trình duyệt là hai hình chữ nhật màu đỏ viền xanh:
Hình 3.26 Minh họa nội dung SVG có tham chiếu đến trang định kiểu CSS
Ví dụ 2
:

Trang định kiểu CSS được nhúng trong nội dung SVG trong một thành phần
‘style’. Ví dụ minh hoạ cách dùng trang định kiểu CSS sau có kết quả như ví dụ 1
trên.
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<defs>
<style type="text/css"><![CDATA[
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
]]></style>
</defs>
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"

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

xmlns=" version="1.1">
<rect x="10" y="10" width="300" height="300"/>

<rect x="320" y="10" width="400" height="300"/>
</svg>
Chú ý trang định kiểu được đặt trong cấu trúc CDATA (<![CDATA[…]]>).
Đặt trang định kiểu CSS trong khối CDATA đôi khi cần thiết vì trang định kiểu
CSS có thể các chứa kí tự , ví dụ ‘>’, xung đột với bộ phân tích SVG. Thậm chí nếu
trang định kiểu không dùng các kí tự xung đột với bộ phân tích XML thì W3C
khuyên vẫn nên đặt trang đinh kiểu trong khối CDATA.
SVG hỗ trợ định kiểu CSS nội tuyến. Tương tự như thuộc tính ‘style’ trong
HTML (ngôn ngữ đánh dấu siêu vă
n bản), định kiểu CSS nội tuyến được khai báo
trong thuộc tính ‘style’ trong SVG bằng cách chỉ định một danh sách các phần tử
cách nhau bởi dấu phẩy (‘,’), mỗi phần tử là một khai báo thuộc tính dạng “tên
thuộc tính : giá trị”.
Ví dụ 3
:
Ví dụ sau minh họa cách định kiểu cho hình chữ nhật bằng thuộc tính ‘style’.
Kết quả nhận được là một hình chữ nhật màu đỏ viền xanh.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
xmlns=" version="1.1">
<rect x="200" y="100" width="600" height="300"
style="fill:red; stroke:blue; stroke-width:3"/>
</svg>
Chú ý là tên thuộc tính và giá trị của thuộc tính trong SVG phân biệt hoa
thường. Do đó khai báo thuộc tính ‘FILL’ thay vì ‘fill’ sẽ dẫn đến kết quả không
như mong muốn.

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

3.13.4 Thành phần ‘style’
Thành phần ‘style’ cho phép trang định kiểu được nhúng trực tiếp vào nội
dung SVG. Thành phần ‘style’ có cùng thuộc tính như trong HTML.
3.13.5 Thuộc tính ‘class’
class = <list>
Thuộc tính này chỉ định một tên lớp hay tập các tên lớp cho một thành
phần. Nhiều thành phần có thể được chỉ định cùng một tên lớp. Nếu
dùng nhiều tên lớp thì phải phân cách nhau bởi một hay nhiều khoảng
trắng.
Thuộc tính ‘class’ chỉ định một hay nhiều tên lớp cho một thành ph
ần. Thành
phần có thể được coi là thuộc về các lớp này. Một tên lớp có thể được dùng chung
bởi nhiều thể hiện của thành phần. Thuộc tính ‘class’ có các vai trò sau:
• Là một bộ chọn lọc trang định kiểu (khi người dùng muốn gán thông tin
định kiểu cho một tập các thành phần).
• Dùng cho xử lý mục đích chung của các tác nhân người dùng.
Ví dụ 1
:
Trong ví dụ sau, thành phần ‘text’ được dùng kết hợp với thuộc tính ‘class’ để
định kiểu cho thông điệp.
<!—English messages >

<text class="info" lang="en">Variable declared twice</text>
<text class="warning" lang="en">Undeclared variable</text>
<text class="error" lang="en">Bad syntax for variable
name</text>

Trong một tác nhân người dùng hỗ trợ định kiểu CSS, quy tắc định kiểu CSS
sẽ báo cho tác nhân người dùng phải hiển thị thông điệp ‘thông tin’ màu xanh,
thông điệp ‘cảnh báo’ màu vàng, và thông điệp ‘cảnh báo’ màu đỏ.
text.info { color: green }

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

text.warning { color: yellow }
text.error { color: red }
3.13.6 Phạm vi của trang định kiểu:
• Tài liệu SVG độc lập:
Chỉ có một cây phân tích. Các trang định kiểu định nghĩa bất kỳ nơi đâu trong
tài liệu SVG (chẳng hạn, trong thành phần ‘style’, hoặc trong thuộc tính ‘style’,
hoặc trong trang định kiểu bên ngoài được tham chiếu) sẽ được áp dụng xuyên suốt
toàn bộ tài liệu SVG.
• Tài liệu SVG độc lập được nhúng trong một tài liệu HTML hay XML
bằng thành phần ‘img’, ‘object’ (HTML) hay ‘image’ (SVG)

Sẽ có hai cây phân tích riêng biệt; m
ột cho tài liệu tham chiếu (có thể là
HTML hay XHTML), và một cho tài liệu SVG. Các trang định kiểu được định
nghĩa trong tài liệu tham chiếu sẽ được áp dụng xuyên suốt tài liệu tham chiếu
nhưng không ảnh hưởng đến tài liệu SVG được tham chiếu. Các trang định kiểu
trong tài liệu SVG được tham chiếu sẽ được áp dụng xuyên suốt toàn tài liệu SVG
nhưng không ảnh hưởng tới tài liệu tham chiếu (tức HTML, XHTML). Để một
trang định kiểu đượ
c dùng chung cho cả hai tài liệu [X]HTML và tài liệu SVG thì
cần liên kết chúng tới cùng một trang định kiểu.
• Nội dung SVG độc lập được nhúng nguyên bản vào một tài liệu XML
Chỉ có một cây phân tích dùng nhiều không gian tên. Cây này có một hay
nhiều cây con trong không gian tên SVG. Các trang định kiểu được định nghĩa
trong tài liệu XML sẽ được áp dụng cho toàn bộ tài liệu, bao gồm cả những phần
trong không gian tên SVG. Để có trang định kiểu khác cho phần SVG, ta nên dùng
thuộc tính định kiểu ‘style’, hoặc đặt m
ột ID cho thành phần ‘SVG’ rồi dùng bộ
chọn lọc trang định kiểu CSS, hoặc bộ chọn lọc XSL.

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

3.14 Đường xén

3.14.1 Giới thiệu:
Đường xén (clipping path) giới hạn khu vực vẽ. Ở mức khái niệm, bất kỳ phần
nào nằm ngoài vùng bao của đường xén đang được kích hoạt sẽ không được vẽ.
Một đường xén có thể được hiểu là như một mặt nạ có các điểm ảnh bên ngoài
đường xén là màu đen với giá trị trong suốt là “0” và các điểm ảnh bên trong đường
xén là màu trắng với giá trị trong suốt là “1”.
3.14.2 Đường xén ban
đầu
Khi một thành phần ‘svg’ là thành phần gốc trong tài liệu hay được nhúng
trong một tài liệu mà cách bố trí của nó (tài liệu chứa) được xác định tùy vào các
quy tắc bố trí của CSS hay XSL, thì tác nhân người dùng phải thiết lập một đường
xén ban đầu cho phân đoạn tài liệu SVG. Thuộc tính ‘overflow’ và thuộc tính ‘clip’
cùng với quy tắc xử lý của tác nhân người dùng sẽ hỗ trợ xác định đường xén ban
đầu mà tác nhân người dùng thiết lập cho phân đoạn tài liệu SVG.

3.14.3 Thu
ộc tính ‘overflow’ và ‘clip’
Thuộc tính ‘overflow’ nhận một trong các giá trị “visible”, “hidden”, “scroll”,
“auto”, “inherit”.
Thuộc tính này được dùng cho các thành phần thiết lập khung nhìn mới, thành
phần ‘pattern’, và thành phần ‘marker’.
Thuộc tính này không được kế thừa.
Cần lưu ý các điểm sau đối với thuộc tính ‘overflow’:
• Thuộc tính ‘overflow’ áp dụng cho các thành phần thiết lập khung nhìn
mới (ví dụ, thành phần ‘svg’), thành phần ‘pattern’ và thành phần

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

‘marker’. Các thành phần khác không chịu ảnh hưởng từ thuộc tính này
(nghĩa là một hình chữ nhật xén không được tạo).
• Đối với các thành phần có thể áp dụng thuộc tính ‘overflow’, nếu thuộc
tính ‘overflow’ có giá trị “hidden” hoặc “scroll”, kết quả là đường xén
hình dạng hình chữ nhật được tạo ra. Kết quả này tương đương với việc
định nghĩa một thành phần ‘clipPath’ có nội dung là một thành phần
‘rect’; sau đó thành phần ‘clipPath’ này được thành phầ
n cho sẵn (thành
phần tạo khung nhìn) tham chiếu tới bằng thuộc tính ‘clipPath’ thông
qua <uri>.
• Nếu thuộc tính ‘overflow’ có giá trị khác ‘hidden’ hoặc ‘scroll’ thì
thuộc tính này không ảnh hưởng gì cả (đường xén hình chữ nhật không
đươc tạo).
• Trong nội dung SVG, giá trị ‘auto’ bằng với “visible”.
• Khi thành phần ‘svg’ ngoài cùng được nhúng nội tuyến trong một văn
phạm XML cha dùng trang định kiểu phân lớp CSS hoặc trang định
dạng XSL: nếu thuộc tính ‘overflow’ có giá trị ‘hidden’ hay ‘scroll’, thì
tác nhân người dùng sẽ thiế
t lập một đường xén bằng với đường bao
của khung nhìn ban đầu. Ngược lại, đường xén sẽ được thiết lập tùy vào
quy tắc xén được định nghĩa trong trang định kiểu phân lớp.
• Khi thành phần ‘svg’ ngoài cùng là một tài liệu độc lập hay được nhúng
nội tuyến trong văn phạm XML cha không dùng trang định kiểu phân
lớp CSS hay trang định dạng XSL, thì thuộc tính ‘overflow’ trên thành

phần ‘svg’ ngoài cùng bị bỏ qua. Lý do của việc này là mục đích hiể
n
thị. Đường xén ban đầu được thiết lập tương ứng với đường bao của
khung nhìn ban đầu.
• Giá trị khởi tạo của thuộc tính ‘overflow’ là “visible”. Tuy nhiên, trang
định kiểu tác nhân người dùng sẽ nạp đè giá trị này, đồng thời thiết lập

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

giá trị ‘overflow’ của thành phần thiết lập khung nhìn mới (ví dụ, thuộc
tính ‘svg’), thành phần ‘pattern’ và thành phần ‘marker’. Giá trị được
thíết lập là ‘hidden’.
Như kết quả ở trên, ứng xử mặc định của tác nhân người dùng SVG là thiết lập
một đường xén ứng với đường bao của khung nhìn ban đầu và thiết lập một đường
xén mới cho mỗi thành phần thiết lập khung nhìn mới và mỗi thành phần ‘pattern’
và ‘marker’.
Thuộc tính clip:
clip = <shape>|auto|inherit
Thuộc tính ‘clip’ có cùng giá trị tham số như được định nghĩa trong [CSS2-
clip]. Giá trị không có đơn vị kèm theo sẽ được tính theo đơn vị của hệ trục toạ độ
hiện tại. Giá trị “auto” định nghĩa một đường xén trùng với đường bao của khung
nhìn được tạo bởi thành phần cho sẵn.

3.14.4 Đường xén đối với khung nhìn và đường xén đối với ‘viewBox’
Chú ý rằng giá trị khởi tạo của thuộc tính ‘overflow’, ‘clip’ và trang định ki
ểu
tác nhân người dùng sẽ ảnh hưởng tới kết quả khởi tạo đường xén ban đầu. Đường
xén này được thiết lập cho đường bao của khung nhìn ban đầu. Khi thuộc tính
‘viewBox’ và ‘preserveAspectRatio’ được chỉ định, đôi khi người ta yêu cầu thiết
lập đường xén cho đường bao của ‘viewBox’ thay cho khung nhìn (hoặc hình chữ
nhật tham chiếu trong trường hợp của thành phần ‘marker’ và ‘pattern’), đặc biệt là
khi thuộc tính ‘preserveAspectRatio’ chỉ định đồng nhất tỉ lệ
và tỉ lệ cạnh của
‘viewBox’ không khớp với tỉ lệ cạnh của khung nhìn.
Để thiết lập đường xén ban đầu cho đường bao của ‘viewBox’, ta thiết lập
đường bao của thuộc tính ‘clip’ trùng với hình chữ nhật được chỉ định trong thuộc
tính ‘viewBox’. Chú ý là các tham số của thuộc tính ‘clip’ là <top>, <right>,
<bottom>, <left>. Ngược lại, đối với thuộc tính ‘viewBox’ là <min-x>, <min-y>,
<width>, <height>.

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

3.14.5 Thiết lập đường xén mới
Một đường xén được định nghĩa bằng một thành phần ‘clipPath’. Một đường
xén được dùng hoặc được tham chiếu bằng thuộc tính ‘clip-path’.

Một thành phần ‘clipPath’ có thể chứa các thành phần ‘path’, ‘text’, các hình
cơ sở (‘circle’) hoặc thành phần ‘use’. Nếu thành phần ‘use’ là con của thành phần
‘clipPath’, nó phải tham chiếu trực tiếp tới thành phần ‘path’, ‘text’, hay thành phần
hình học cơ sở. Tham chiếu không trực tiếp sẽ
gây ra lỗi.
Hình không viền của mỗi thành phần con (bỏ qua các thuộc tính vẽ, như ‘fill’,
‘stroke’, ‘stroke-width’) của ‘clipPath’ sẽ định nghĩa ở mức khái niệm một mặt nạ
1-bit. Bất kỳ thành phần nào nằm ngoài đường viền sẽ bị che khuất. Khi thành phần
‘clipPath’ chứa nhiều thành phần con, một điểm được cho là nằm trong đường xén
nếu nó nằm trong bất kỳ con nào của ‘clipPath’.
Đối với thành phần đồ họ
a cho sẵn, đường xén thực sự được dùng là vùng giao
nhau giữa các đường xén (được chỉ định bởi thuộc tính ‘clip-path’) với bất kỳ
đường xén nào trong thành phần cha của nó (được chỉ định bởi thuộc tính ‘clip-
path’ trong thành phần cha hoặc bởi thuộc tính ‘overflow’ trong thành phần cha
thiết lập khung nhìn mới).
Hai điểm cần lưu ý:
• Bản thân thành phần ‘clipPath’ và thành phần con của nó không kế thừa
đường xén từ thành phần tổ tiên của thành phầ
n ‘clipPath’ này.
• Thành phần ‘clipPath’ hay bất kỳ thành phần con của nó đều có thể chỉ
định thuộc tính ‘clipPath’. Nếu một tham chiếu ‘clipPath’ hợp lệ được
đặt trong thành phần ‘clipPath’, thì đường xén nhận được là phần giao
của các nội dung của thành phần ‘clipPath’ với các đường xén được
tham chiếu.
Nếu tham chiếu ‘clipPath’ hợp lệ được đặt trong một thành phần con
của thành phần ‘clipPath’, thì thành phần con cho sẵn sẽ được xén bởi

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

đường xén được tham chiếu đó trước khi hội (OR) các hình chiếu của
thành phần con này với các hình chiếu của thành phần con khác.

Một số thuộc tính của thành phần ‘clipPath’:
clipPathUnits = “userSpaceOnUse | objectBoudingBox”
Định nghĩa hệ trục toạ độ cho nội dung của thành phần ‘clipPath’.
Nếu clipPathUnits = “userSpaceOnUse” thì nội dung của thành phần
‘clipPath’ sẽ cung cấp giá trị theo hệ trục toạ độ hiện tại, nơi mà thành
phần ‘clipPath’ được tham chiếu (nghĩa là hệ
trục toạ độ của thành
phần tham chiếu tới thành phần ‘clipPath’ thông qua thuộc tính ‘clip-
path’).
Nếu clipPathUnits = “objectBoundingBox” thì hệ trục toạ độ của nội
dung của thành phần ‘clipPath’ sẽ được thiết lập bằng cách dùng
đường bao (bounding box) của thành phần sử dung đường xén này.
Nếu thuộc tính ‘clipPathUnits’ không được chỉ định, thì giá trị mặc
định là “userSpaceOnUse”.
Thuộc tính kế thừa vào thành phần ‘clipPath’ từ thành phần cha của nó, thuộc
tính không kế thừa từ
thành phần tham chiếu thành tới phần ‘clipPath’.
Thành phần ‘clipPath’ không bao giờ được hiển thị trực tiếp, cách sử dụng duy
nhất của nó là xem nó là một cái gì đó có thể được tham chiếu bằng thuộc tính ‘clip-

path’. Thuộc tính ‘display’ không áp dụng cho thành phần ‘clipPath’; do đó thành
phần ‘clipPath’ không được hiển thị trực tiếp thậm chỉ thuộc tính ‘display’ được
thiết lập khác “none”, và thành phần ‘clipPath’ sẵn sàng cho tham chiếu thậm chí
khi thuộc tính ‘display’ trên thành phần ‘clipPath’ hay bất kỳ thành phầ
n cha của nó
được thiết lập thành “none”.

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

clip-path = <uri> | none | inherit
<uri> là một tham chiếu tới một đối tượng đồ hoạ khác trong cùng
một phân đoạn tài liệu SVG mà sẽ được dùng như đường xén.
Mặc định là ‘none’.
clip-rule = nonzero | evenodd | inherit
Thuộc tính ‘clip-rule’ chỉ áp dụng cho các thành phần đồ hoạ được chứa
trong một thành phần ‘clipPath’. Phân đoạn sau sẽ áp dụng quy tắc xén
evennodd (chẵn-lẽ) cho đường xén vì thuộc tính ‘clip-rule’ được chỉ
định trên thành phần ‘path’. Thành phần ‘path’ này định nghĩa hình
dạng
đường xén.

<g clip-rule="nonzero">
<clipPath id="MyClip">
<path d=" " clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" />
</g>

Ngược lại phân đoạn sau sẽ không dung quy tắc xén ‘evenodd’ cho đường xén
vì thuộc tính ‘clip-rule’ được chỉ định trong thành phần tham chiếu, không phải trên
đối tượng định nghĩa hình dạnh đường xén.

<g clip-rule="nonzero">
<clipPath id="MyClip">
<path d=" " />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" />
</g>

Ví dụ 1
:
Vi dụ sau minh cách dùng đường xén bằng thành phần ‘clipPath’:

TÌM HIỂU SVG VÀ ỨNG DỤNG - 6 pot

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về