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

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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!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="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 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; <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> <g transform="translate(50,0)"><text y="- 10">xMid*</text>&Viewport2; <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> <g transform="translate(100,0)"><text y="- 10">xMax*</text>&Viewport2; <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">&Smile;</svg></g> </g> <g id="slice-group-2" transform="translate(250, 220)"> <text x="0" y="-30"> slice </text> <g><text y="-10">*YMin</text>&Viewport1; <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(70,0)"><text y="- 10">*YMid</text>&Viewport1; <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg></g> <g transform="translate(140,0)"><text y="- 10">*YMax</text>&Viewport1; <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" 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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" 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 > <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" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="5cm" viewBox="0 0 1000 500" 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> 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 Tài liệu SVG tham chiếu tới trang định kiểu ngoài mystyle.css < /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’... 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... dạng tập tin SVG 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... 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 < /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 . standalone="no"?> <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> < ;svg width="4in" height="3in". đỏ và viền xanh. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd">. type="text/css"?> <!DOCTYPE svg PUBLIC " ;-/ /W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics /SVG/ 1.1/DTD /svg1 1.dtd"> < ;svg width="10cm" height="5cm"