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

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ố

Trang 1

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:

Trang 2

• 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

• 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

• xMinYMid-Cần bảo toàn tỉ lệ cạnh

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

Trang 3

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

• 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

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

Trang 4

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"

[ <!ENTITY Smile "

</g>

">

Trang 5

height='29'

fill='none' stroke='blue'/>">

<!ENTITY Viewport2 "<rect x='.5' y='.5' width='29'

height='59'

fill='none' stroke='blue'/>">

]>

xmlns="http://www.w3.org/2000/svg">

<desc>Example PreserveAspectRatio - illustrates

preserveAspectRatio attribute</desc>

<rect x="1" y="1" width="448" height="298"

fill="none" stroke="blue"/>

<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><text y="-10">xMin*</text>&Viewport1;

viewBox="0 0 30 40"

width="50" height="30">&Smile;</svg></g> <g transform="translate(70,0)"><text

y="-10">xMid*</text>&Viewport1;

viewBox="0 0 30 40"

width="50" height="30">&Smile;</svg></g> <g transform="translate(0,70)"><text

y="-10">xMax*</text>&Viewport1;

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;

viewBox="0 0 30 40"

width="30" height="60">&Smile;</svg></g> <g transform="translate(50, 0)"><text

y="-10">*YMid</text>&Viewport2;

viewBox="0 0 30 40"

Trang 6

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

<g transform="translate(100, 0)"><text

y="-10">*YMax</text>&Viewport2;

viewBox="0 0 30 40"

</g>

<g id="slice-group-1" transform="translate(100, 220)"> <text x="0" y="-30"> slice

-</text>

<g><text y="-10">xMin*</text>&Viewport2;

viewBox="0 0 30 40"

<g transform="translate(50,0)"><text

y="-10">xMid*</text>&Viewport2;

viewBox="0 0 30 40"

y="-10">xMax*</text>&Viewport2;

viewBox="0 0 30 40"

</g>

<g id="slice-group-2" transform="translate(250, 220)"> <text x="0" y="-30"> - slice -</text>

<g><text y="-10">*YMin</text>&Viewport1;

viewBox="0 0 30 40"

y="-10">*YMid</text>&Viewport1;

viewBox="0 0 30 40"

y="-10">*YMax</text>&Viewport1;

viewBox="0 0 30 40"

</g>

</svg>

Trang 7

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ạ độ

Trang 8

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

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

<! drawing B goes here >

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

Trang 9

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="200" y="100" width="600" height="300"

fill="red" stroke="blue" stroke-width="3"/>

</svg>

Trang 10

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’

Định dạng
Số trang	20
Dung lượng	603,37 KB