TÌM HIỂU SVG VÀ ỨNG DỤNG - 5 doc

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

Một số thuộc tính của thành phần ‘ellipse’:
cx = “<coordinate>”
Toạ độ x của tâm e-lip. Mặc định là “0”
cy = “<coordinate>”
Toạ độ y của tâm e-lip. Mặc định là “0”
rx = “<length>”
Bán kính trục x của e-lip. Không nhận giá trị âm. Giá trị âm sẽ gây ra
lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị.
ry = “<length>”
Bán kích trục y của e-lip Không nhận giá trị âm. Giá trị âm sẽ gây ra
lỗi. Nếu giá trị là “0” thì thành phần này không được hiển thị.
Ví dụ 1
:
Ví dụ sau xây dựng hai hình e-lip trong hệ trục toạ độ người dùng được
thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’ và thuộc tính
‘transform’ trong thành phần ‘g’ và ‘ellipse’. Cả hai e-lip dùng giá trị mặc định
cho thuộc tính ‘cx’ và ‘cy’ (tâm của e-lip). Hình e-lip thứ hai được quay lệch
một góc.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns=" version="1.1">
<desc>Example ellipse01 - examples of ellipses</desc>
<! Show outline of canvas using 'rect' element >
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g transform="translate(300 200)">
<ellipse rx="250" ry="100"
fill="red" />
</g>
<ellipse transform="translate(900 200) rotate(-30)"
rx="250" ry="100"
fill="none" stroke="blue" stroke-width="20" />
</svg>










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

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

3.11.4 Đường thẳng – thành phần ‘line’
Thành phần ‘line’ định nghĩa một đoạn thẳng bắt đầu tại một điểm và kết
thúc tại một điểm khác.
Một số thuộc tính của thành phần ‘line’
x1= “<coordinate>”
Toạ độ x của điểm đầu. Mặc định là “0”
y1= “<coordinate>”
Toạ độ y của điểm đầu. Mặc định là “0”
x2= “<coordinate>”
Toạ độ x của đ
iểm cuối. Mặc định là “0”
y2= “<coordinate>”
Toạ độ y của điểm cuối. Mặc định là “
Ví dụ 1
: Ví dụ sau xây dựng năm đoạn thẳng trong hệ trục toạ độ người
dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’. Các đoạn
thẳng có độ dày khác nhau.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns=" version="1.1">
<desc>Example line01 - lines expressed in user
coordinates</desc>
<! Show outline of canvas using 'rect' element >
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g stroke="green" >

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

<line x1="100" y1="300" x2="300" y2="100"
stroke-width="5" />
<line x1="300" y1="300" x2="500" y2="100"
stroke-width="10" />
<line x1="500" y1="300" x2="700" y2="100"
stroke-width="15" />
<line x1="700" y1="300" x2="900" y2="100"
stroke-width="20" />
<line x1="900" y1="300" x2="1100" y2="100"
stroke-width="25" />
</g>
</svg>

Kết qủa trên trình duyệt:
Hình 3.15. Minh họa thành phần ‘line’
3.11.5 Đường gấp khúc – thành phần ‘polylinbe’
Thành phần ‘polyline’ định nghĩa một tập các đoạn thẳng nối trực tiếp với
nhau. Thành phần ‘polyline’ định nghĩa một hình mở.
Một số thuộc tính của thành phần ‘polyline’:
points= “<list-of-points>”
Mảng các điểm tạo nên đường gấp khúc. Giá trị các toạ độ tính theo hệ trục

toạ độ người dùng hiện tại.
Ví dụ 1
: Ví dụ sau xây dựng một đường gấp khúc trong hệ trục tọa độ
người dùng được thiết lập bởi thuộc tính ‘viewBox’ trong thành phần ‘svg’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns=" version="1.1">
<desc>Example polyline01 - increasingly larger
bars</desc>
<! Show outline of canvas using 'rect' element >
<rect x="1" y="1" width="1198" height="398"









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

fill="none" stroke="blue" stroke-width="2" />
<polyline fill="none" stroke="blue" stroke-width="10"
points="50,375
150,375 150,325 250,325 250,375
350,375 350,250 450,250 450,375

550,375 550,175 650,175 650,375
750,375 750,100 850,100 850,375
950,375 950,25 1050,25 1050,375
1150,375" />
</svg>

Kết quả trên trình duyệt:
Hình 3.16 Minh họa thành phần ‘polyline’
3.11.6 Đa giác – thành phần ‘polygon’
Thành phần ‘polygon’ định nghĩa một đa giác.
Một số thuộc tính của thành phần ‘polygon’:
points = “<list-of-points>”
Mảng các điểm tạo nên đa giác. Tất cả các toạ độ được tính theo hệ trục toạ
độ người dùng hiện tại.
Ví dụ 1
: Ví dụ sau xây dựng hai hình đa giác (một ngôi sao và một lục
giác) trong hệ trục toạ độ người dùng được thiết lập bởi thuộc tính ‘viewBox’
trong thành phần ‘svg’.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns=" version="1.1">
<desc>Example polygon01 - star and hexagon</desc>
<! Show outline of canvas using 'rect' element >
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215

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

423,301 350,250 277,301 303,215
231,161 321,161" />
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5
850,325 742,262.6 742,137.5" />
</svg>
3.12 Hệ trục toạ độ, các phép biến đổi và các đơn vị đo
3.12.1 Giới thiệu
Đối với tất cả các phương tiện (media), phông nền SVG (SVG canvas) là
“không gian để hiển thị nội dung SVG”. Phông nền thì không giới hạn các hướng
trong không gian, nhưng nội dung SVG chỉ hiển thị trong một phạm vi hình chữ
nhật của phông nền. Phạm vi hình chữ nhật đó được gọi là khung nhìn SVG (SVG
viewport). Đối với các phương tiện trực quan (visual media), khung nhìn SVG là
phạm vi mà người dùng nhìn thấy nội dung SVG trong đó.
Kích thước của khung nhìn SVG (chiề
u dài, chiều rộng) được xác định bởi
một quá trình thoả thuận giữa phân đoạn tài liệu SVG và cha (có thực hay không
tường minh) của nó. Một khi quá trình thoả thuận hoàn tất, tác nhân người dùng
SVG được cung cấp các thông tin sau:

• Một con số đại diện cho chiều dài tính bằng đơn vị “điểm ảnh” (pixels)
của khung nhìn.
• Một con số đại diện cho chiều rộng tính bằng đơn vị “điểm
ảnh” của
khung nhìn.
• (không bắt buộc) một giá trị số thực xác định kích thước trong thế giới
thực của một “điểm ảnh” (là bao nhiêu mm chẳng hạn).
Dùng các thông tin trên, tác nhân người dùng xác định khung nhìn, hệ trục toạ
độ khung nhìn ban đầu (viewport coordinate system) và một hệ trục toạ độ người
dùng ban đầu (user coordinate system). Cả hai hệ trục toạ độ này có cùng gốc toạ độ
trùng với gốc toạ độ củ
a khung nhìn (đối với khung nhìn gốc thì gốc toạ độ của








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

khung nhìn là góc trái trên). Một đơn vị toạ độ trong hệ trục toạ độ ban đầu bằng
một “điểm ảnh” trong khung nhìn. Hệ trục toạ độ khung nhìn còn được gọi là không
gian khung nhìn (viewport space) và hệ trục toạ độ người dùng còn được gọi là
không gian người sử dụng (user space).
Giá trị chiều dài trong SVG được đo như sau:
• Nếu không có đơn vị kèm theo, ví dụ “15”, thì tính theo giá trị đơn vị
trong hệ trục to

ạ độ người dùng.
• Nếu có đơn vị kèm theo, ví dụ “15m” hay “5cm”, thì tính theo hệ đo
lường.
Các đơn vị chiều dài hỗ trợ là : em, ex, px, pt, pc, cm, mm, in và %.
Một không gian người dùng (nghĩa là một hệ trục toạ độ hiện tại mới) có thể
được thiết lập tại bất kỳ nơi nào trong một phân đoạn tài liệu SVG bằng các phép
biến đổi (transformations) dưới dạng các ma trận biến đổi (transformation matrices)
hay các phép biế
n đổi đợn như phép quay (rotate), xiên (xskew, yskew), tỉ lệ (scale)
và tịnh tiến (translate). Thiết lập một không gian người dùng mới bằng các phép
biến đổi hệ trục toạ độ là nền tảng cho đồ họa 2D, cung cấp một phương thức thông
thường cho việc kiểm soát kích thước, vị trí, góc quay, độ xiên của các đối tượng đồ
hoạ.
Một khung nhìn mới cũng có thể được thiết lập. Bằng cách thiết l
ập một khung
nhìn mới, chúng ta có thể định nghĩa một phạm vi hình chữ nhật mới để các đối
tượng đồ họa hiển thị vừa khít trong nó.
3.12.2 Khung nhìn ban đầu
Tác nhân người dùng SVG thoả thuận với tác nhân người dùng cha để xác
định khung nhìn mà tác nhân người dùng SVG sẽ xây dựng nội dung SVG trong đó.
Trong một số trường hợp, nội dung SVG được nhúng trong một tài liệu khác (tài
liệu chứa). Tài liệu chứa này có các thuộc tính và các tham số dùng để chỉ
định hay

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

cung cấp các thông tin về kích thước của khung nhìn cho nội dung SVG. Nội dung
SVG, một cách tuỳ chọn, cung cấp thông tin liên quan đến khung nhìn thích hợp
cho nội dung SVG thông qua thuộc tính ‘width’ và ‘height’ trong thành phần ‘svg’
ngoài cùng. Quá trình thoả thuận sử dụng bất kỳ thông tin được cung cấp bởi tài
liệu chứa và nội dung SVG để chọn vị trí và kích thước khung nhìn cho nội dung
SVG.
Thuộc tính ‘width’ trong thành phần ‘svg’ thiết lập chiều dài của khung nhìn,
trừ các trường hợp sau:
• Nội dung SVG là một tài nguyên được l
ưu trữ độc lập và được nhúng
bằng tham chiếu (chẳng hạn, nhúng vào tài liệu XHTML qua thành
phần ‘object’), hoặc nội dung SVG được nhúng trong một tài liệu chứa.
• Và thành phần đang tham chiếu tới nội dung SVG hay tài liệu chứa
được định kiểu bằng trang định kiểu CSS hay XSL
• Và có các thuộc tính định vị tương thích CSS được chỉ định trong thành
phần đang tham chiếu (ví dụ thành phần ‘object’) hay trong thành phần
‘svg’ ngoài cùng của tài liệu chứ
a có khả năng thiết lập chiều dài của
khung nhìn.
Trong các trường hợp này, thuộc tính định vị sẽ thiết lập chiều dài của khung
nhìn.
Tương tự, nếu có các thuộc tính định vị được chỉ định trong thành phần tham
chiếu tới tập tin SVG hay trên thành phần ‘svg’ ngoài cùng tài liệu chứa có khả
năng thiết lập chiều rộng của khung nhìn, thì khi đó các thuộc tính định vị này sẽ
thiết lập chiề
u rộng của khung nhìn; ngược lại, thuộc tính ‘height’ trên thành phần

‘svg’ ngoài cùng của nội dung SVG sẽ thiết lập chiều rộng của khung nhìn.
Nếu thuộc tính ‘width’ hay ‘height’ trên thành phần ‘svg’ ngoài cùng đo theo
đơn vị ngừơi dùng (không có chỉ định đơn vị đo), khi đó giá trị này được tính theo
đơn vị px (pixel).








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

Ví dụ 1
:
Trong ví dụ sau, một ảnh SVG được nhúng nội tuyến trong một tài liệu XML
được định dạng theo CSS. Bởi vì các thuộc tính định vị CSS khộng được cung cấp
trong thành phần ‘svg’ ngoài cùng, nên thuộc tính width= “100px” và height =
“200px” xác định kích thước của khung nhìn ban đầu.
<?xml version="1.0" standalone="yes"?>
<parent xmlns="">

<! SVG graphic >
<svg xmlns='
width="100px" height="200px" version="1.1">
<path d="M100,100 Q200,400,300,100"/>
<! rest of SVG graphic would go here >
</svg>

</parent>

3.12.3 Hệ trục toạ độ ban đầu
Đối với thành phần SVG ngoài cùng của nội dung SVG, tác nhân người dùng
SVG xác định một hệ trục tọa độ khung nhìn (viewport coordinate system) ban đầu
và một hệ trục toạ độ người dùng (user coordinate system) ban đầu. Gốc toạ độ của
hai hệ trục toạ độ này trùng với gốc toạ độ của khung nhìn, và mỗi đơn vị trong hệ
trục toạ độ ban đầu bằng 1 “
điểm ảnh” (pixel). Trong hầu hết các trường hợp, tài
liệu SVG độc lập hay phân đoạn tài liệu SVG được nhúng trong một tài liệu XML
cha, thì hệ trục toạ độ khung nhìn ban đầu có gốc toạ độ nằm ở góc trái của khung
nhìn với trục x hướng từ trái sang phải, trục y từ trên xuống.
Ví dụ 1
:
Ví dụ một hệ trục toạ độ ban đầu với gốc toạ độ nằm ở góc trái và trục x
hướng sang phải, trục y hướng từ trên xuống. Hệ trục toạ độ người dùng ban đầu có
mỗi đơn vị người dùng bằng một “pixel”.









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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="300px" height="100px" version="1.1"
<xmlns="
<desc>Example InitialCoords - SVG's initial coordinate
system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<line x1="0" y1="1.5" x2="300" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g fill="red" stroke="none" >
<rect x="0" y="0" width="3" height="3" />
<rect x="297" y="0" width="3" height="3" />
<rect x="0" y="97" width="3" height="3" />
</g>
<g font-size="14" font-family="Verdana" >
<text x="10" y="20">(0,0)</text>
<text x="240" y="20">(300,0)</text>
<text x="10" y="90">(0,100)</text>
</g>
</svg>
Kết quả trên trình duyệt:
3.12.4 Các phép biến đổi hệ trục toạ độ
Một hệ trục toạ độ người dùng mới (nghĩa là một hệ trục toạ độ hiện hiện tại
mới – new current coordinate system ) có thể được thiết lập bằng các phép biến đổi
thông qua thuộc tính ‘transform’ của thành phần vật chứa hay thành phần đồ họa,
hay thông qua thuộc tính ‘viewBox’ của thành phần ‘svg’, ‘symbol’, ‘marker’,
‘pattern’ và thành phần ‘view’. Thuộc tính ‘transform’ và ‘viewBox’ đượ

c áp dụng
(biến đổi) cho các toạ độ và chiều dài trong hệ trục toạ độ người dùng của thành

Hình 3.17. Minh họa hệ trục tọa độ ban đầu








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

phần chứa thuộc tính này và tất cả các thành phần con. Các phép đổi có thể lồng
nhau, lúc đó các phép biến đổi sẽ được cộng dồn lại.
Ví dụ 2
:
Dưới đây là ví dụ về một tài liệu không có phép biến đổi. Chuỗi văn bản được
xác định trong hệ toạ độ ban đầu.


Kết quả trên trình duyệt:
Hình 3.18. Minh họa hiển thị không có phép biến đổi
Ví dụ 3
:
Thiết lập một hệ trục toạ độ người dùng bằng phép tịnh tiến transfrom=
“translate(50,50)” trên thành phần ‘g’ thứ ba. Hệ trục toạ độ người dùng mới có gốc
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="400px" height="150px" version="1.1"
xmlns="
<desc>Example OrigCoordSys - Simple transformations:
original picture</desc>
<g fill="none" stroke="black" stroke-width="3" >
<! Draw the axes of the original coordinate system >
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana"
>
ABC (orig coord system)
</text>
</g>
</svg>








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

toạ độ tại (50,50) trong hệ trục toạ độ nguyên thủy. Kết quả của phép biến đổi này

là một toạ độ (30,30) trong hệ trục toạ độ người dùng mới được ánh xạ thành
(80,80) trong hệ trục toạ độ nguyên thủy . Như vậy các toạ độ được tính tiến 50 đơn
vị trên trục x và 50 đơn vị trên trục y.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="400px" height="150px" version="1.1"
xmlns="
<desc>Example NewCoordSys - New user coordinate
system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<! Draw the axes of the original coordinate system >
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>
<g>
<text x="30" y="30" font-size="20" font-family="Verdana"
>
ABC (orig coord system)
</text>
</g>
<! Establish a new coordinate system, which is
shifted (i.e., translated) from the initial
coordinate
system by 50 user units along each axis. >
<g transform="translate(50,50)">
<g fill="none" stroke="red" stroke-width="3" >
<! Draw lines of length 50 user units along
the axes of the new coordinate system >
<line x1="0" y1="0" x2="50" y2="0" stroke="red" />

<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="30" y="30" font-size="20" font-family="Verdana"
>
ABC (translated coord system)
</text>
</g>
</svg>










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

Kết quả trên trình duyệt:
Ví dụ 4
:
Dùng phép biến đổi tỉ lệ (sclale) và quay (rotate), ví dụ sau định nghĩa hai hệ
trục toạ độ người dùng mới.
• Một hệ trục là kết quả của phép tịnh tiến 50 đơn vị theo trục x và 30
đơn vị theo trục y, và phép quay 30
o

• Một hệ trục là kết quả của phép tịnh tiến 200 đơn vị theo trục x và 40
đơn vị theo trục y, và phép tỉ lệ 1.5

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="400px" height="120px" version="1.1"
xmlns="
<desc>Example RotateScale - Rotate and scale
transforms</desc>
<g fill="none" stroke="black" stroke-width="3" >
<! Draw the axes of the original coordinate system >
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<! Establish a new coordinate system whose origin is at
(50,30)
in the initial coord. system and which is rotated by
30 degrees. >
<g transform="translate(50,30)">
<g transform="rotate(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
Hình 3.19. Minh họa phép tịnh tiến

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

<text x="0" y="0" font-size="20" font-family="Verdana"
fill="blue" >
ABC (rotate)
</text>
</g>
</g>
<! Establish a new coordinate system whose origin is at
(200,40)
in the initial coord. system and which is scaled by
1.5. >
<g transform="translate(200,40)">
<g transform="scale(1.5)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-family="Verdana"
fill="blue" >
ABC (scale)
</text>
</g>
</g>
</svg>

Kết quả trên trình duyệt:
Hình 3.20. Minh họa phép quay và phép co giãn
Ví dụ 5: Định nghĩa hai hệ trục toạ độ được biến đổi xiên tương đối với hệ trục
toạ độ nguyên thủy.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="400px" height="120px" version="1.1"
xmlns="
<desc>Example Skew - Show effects of skewX and
skewY</desc>
<g fill="none" stroke="black" stroke-width="3" >
<! Draw the axes of the original coordinate system
>









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

<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="120" />
</g>
<! Establish a new coordinate system whose origin is at

(30,30)
in the initial coord. system and which is skewed in
X by 30 degrees. >
<g transform="translate(30,30)">
<g transform="skewX(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-
family="Verdana" fill="blue" >
ABC (skewX)
</text>
</g>
</g>
<! Establish a new coordinate system whose origin is at
(200,30)
in the initial coord. system and which is skewed in
Y by 30 degrees. >
<g transform="translate(200,30)">
<g transform="skewY(30)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="20" font-
family="Verdana" fill="blue" >
ABC (skewY)
</text>
</g>

</g>
</svg>
Kết quả trên trình duyệt:
Hình 3.21. Minh họa phép kéo xiên theo trục X, trục Y









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

Ví dụ 6
: Các phép biến đổi lồng nhau.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="400px" height="150px" version="1.1"
xmlns="
<desc>Example Nested - Nested transformations</desc>
<g fill="none" stroke="black" stroke-width="3" >
<! Draw the axes of the original coordinate system
>
<line x1="0" y1="1.5" x2="400" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>

<! First, a translate >
<g transform="translate(50,90)">
<g fill="none" stroke="red" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-
family="Verdana" >
Translate(1)
</text>
<! Second, a rotate >
<g transform="rotate(-45)">
<g fill="none" stroke="green" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-
family="Verdana" >
Rotate(2)
</text>
<! Third, another translate >
<g transform="translate(130,160)">
<g fill="none" stroke="blue" stroke-width="3" >
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" font-size="16" font-
family="Verdana" >
Translate(3)
</text>

</g>
</g>
</g>
</svg>








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

Kết quả trên trình duyệt :
Hình 3.22 Minh họa phép các phép biến đổi lồng nhau
3.12.5 Thuộc tính ‘transform’
Thuộc tính ‘transform’ (biến đổi) là một <transform-list>” (danh sách các biến
đổi). Thuộc tính này dùng để định nghĩa một mảng các phép biến đổi, các phép biến
đổi sẽ được áp dụng theo trình tự cung cấp trong mảng. Các phép biến đổi riêng biệt
được phân nhau bởi khoảng trắng hoặc dấu phẩy (‘,’). Các phép biến đổi được định
nghĩa trước là:
• matrix(<a><b><c><d><e><f>) được dùng để định nghĩa một phép biến
đổi bằng ma trậ
n biến đổi. Các giá trị a,b,c,d,e,f là các phần tử của ma
trận biến đổi affine 3x3:

• translate(<tx><[ty]>) được dùng để định nghĩa một phép tịnh tiến.Với
tx độ dời theo trục x, ty là độ dời theo trục y. Nếu <ty> không được

cung cấp thì được cho bằng 0.
• scale(<sx>[<sy>]) được dùng để định nghĩa một phép tỉ lệ. Với sx và sy
là chỉ số co dãn theo trục x va trục y. Nếu trị tuyệt đối củ
a sx và sy lớn
hơn 1 thì phép biến đổi dùng để phóng to hình, ngược lại thì thu nhỏ
hình. Nếu <sy> không được cung cấp thì được gán bằng <sx>.








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

• rotate(<rotate-angle>[<cx><y>]) được dùng để định nghĩa một phép
quay quanh một điểm được cho trước <rotate-angle> độ. Nếu tham số
<cx> và <cy> không được cung cấp thì sẽ quay quanh gốc toạ độ của
hệ trục toạ độ người dùng hiện tại. Phép biến đổi này tương đương ma
trận [cos(a) sin(a) –sin(a) cos(a) 0 0].
Nếu tham số <cx> và <cy> được cung cấp thì sẽ quay quanh điểm
(<cx>,<cy>). Phép biến đỏi này tương đương với dãy các biến đổ
i sau:
translate(<cx>,<cy>) rotate(<rotate-angle>) translate(-<cx>,-cy>).
• skewX(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục x.
• skewY(<skew-angle>) chỉ định một phép biến đổi xiên dọc theo trục y.
Khi áp dụng mảng các phép biến đổi thì kết quả cũng giống như khi áp dụng
các phép biến đổi riêng rẽ theo trình tự trong mảng.

Ví du 1
:
Định nghĩa mảng các phép biến đổi:
<g transform="translate(-10,-20) scale(2) rotate(45)
translate(5,10)">
<! graphics elements go here >
</g>

Cũng có kết quả như định nghĩa các phép biến đổi riêng biệt sau:
<g transform="translate(-10,-20)">
<g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<! graphics elements go here >
</g>
</g>
</g>
</g>

Thuộc tính ‘transform’ được áp dụng trước khi xử lý bất kỳ toạ độ hay giá trị
độ dài của thành phần chứa thuộc tính này. Ví dụ như trong thành phần sau.








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

97

<rect x="10" y="10" width="20" height="20"
transform="scale(2)"/>

Các giá trị x, y, width, height được xử lý sau khi hệ trục toạ độ hiện tại được
áp dụng phép biến đổi tỉ lệ scale(2). Thuộc tính ‘x’, ‘y’, ‘width’ và ‘height’ được
tính theo hệ trục toạ độ người dùng mới. Do đó thành phần ‘rect’ sẽ tương đương
với :
<g transform="scale(2)">
<rect x="10" y="10" width="20" height="20"/>
</g>

3.12.6 Thuộc tính ‘viewBox’
Thuộc tính viewBox dùng để thiết lập một hệ trục toạ độ người dùng mới ,
được dùng khi muốn trải các hình ra cho vừa với thành phần vật chứa.
Áp dụng cho tất cả các thành phần có khả thiết lập khung nhìn mới và các
thành phần ‘marker’, ‘pattern’ và ‘view’ có thuộc tính viewBox. Giá trị của thuộc
tính ‘viewBox’ là một danh sách bốn số <min-x>, <min-y>, <width> và <height>,
được tách biệt nhau bởi khoảng trắng hoặc dấu phẩy, dùng để đị
nh nghĩa một hình
chữ nhật trong hệ trục toạ độ người dùng sẽ được ánh xạ vào đường bao của khung
nhìn được thiết lập bởi thành phần được cho.
Khi thuộc tính viewBox được thiết lập, tác nhân người dùng tự động phát sinh
các ma trận biến đổi thích hợp để ánh xạ hình chữ nhật được chỉ định trong hệ toạ
độ người dùng vào đường bao của khung nhìn.
Thuộc tính ‘viewBox’ thường được dùng vớ
i thuộc tính ‘preservAspectRatio’
để xác định gốc toạ độ cũng như giá trị mỗi đơn vị chiều dài của hệ trục toạ độ
người dùng mới.

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

Lưu ý là giá trị <width> và <height> của thuộc tính ‘viewBox’ không nhận giá
trị âm. Nếu thiết lập giá trị âm sẽ gây ra lỗi, nếu thiết lập bằng “0” thì thành phần
này không được hiển thị.
Ví dụ 1
:
Ví dụ sau minh hoạ cách sử dụng thuộc tính ‘viewBox’ trong thành phần ‘svg’
ngoài cùng để trải nội dung SVG vừa khít với biên của khung nhìn.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="300px" height="200px" version="1.1"
viewBox="0 0 1500 1000" preserveAspectRatio="none"
xmlns="
<desc>Example ViewBox - uses the viewBox
attribute to automatically create an initial user
coordinate
system which causes the graphic to scale to fit into the
viewport no matter what size the viewport is.</desc>
<! This rectangle goes from (0,0) to (1500,1000) in user

space.
Because of the viewBox attribute above,
the rectangle will end up filling the entire area
reserved for the SVG content. >
<rect x="0" y="0" width="1500" height="1000"
fill="yellow" stroke="blue" stroke-width="12" />
<! A large, red triangle >
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<! A text string that spans most of the viewport >
<text x="100" y="600" font-size="200" font-
family="Verdana" >
Stretch to fit
</text>
</svg>
Kết quả trên trình duyệt (hình bên trái), hình bên phải là kết quả khi thay đổi
Hình 3.23 Minh họa thuộc tính ‘viewBox’








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

thuộc tính
width="150px" height="200px".
Để đạt được kết quả bên trái, với khung nhìn 300x200 px, tác nhân người dùng

tự động chèn vào phép biến đổi tỉ lệ transform="scale(0.2)”, kết quả tương đương
có một khung nhìn kích thước 300x200 px và phép biến đổi tỉ lệ bổ sung như sau:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="300px" height="200px" version="1.1"
xmlns="
<g transform="scale(0.2)">
<! Rest of document goes here >
</g>
</svg>
Để đạt được kết quả bên phải, với khung nhìn 150x200 px, tác nhân người
dùng tự động chèn vào phép biến đổi tỉ lệ transform="scale(0.1 0.2)”, kết quả tương
đương có một khung nhìn kích thước 150x200 px và phép biến đổi tỉ lệ bổ sung như
sau:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"
<svg width="150px" height="200px" version="1.1"
xmlns="
<g transform="scale(0.1 0.2)">
<! Rest of document goes here >
</g>
</svg>
Trong một số trường hợp tác nhân người dùng cần cung cấp một phép tịnh tiến
(translate) ngoài phép biến đổi tỉ lệ (sacle). Ví dụ, khi trong thành phần ‘svg’ ngoài
cùng , thuộc tính ‘viewBox’ có giá trị <min-x> hay <min-y> khác “0”.
Không giống thuộc tính ‘transform’, các phép biến đổi tự động được tạo bởi sự
có mặt của thuộc tính ‘viewBox’ không ảnh hưởng đến thuộc tính ‘x’, ‘y’, ‘width’,
‘height’ (hay trong trường hợp thành phần ‘marker’, là thuộc tính ‘markerWidth’,

‘markerHeight’) trên thành phần chứa thuộc tính ‘viewBox’ đó. Do đó trong ví dụ
trên, thuộc tính ‘width’ và ‘height’ được tính theo đơn vị đo trong hệ trục toạ độ
trước khi áp dụng phép biến đổi ‘viewBox’. Mặc khác, giống thuộc tính ‘transform’