intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

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

Chia sẻ: Cao Tt | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST
Báo xấu
111
lượt xem 9
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Chương 3. Cấu trúc định dạng tập tin SVG Một số thuộc tính của thành phần ‘ellipse’: cx = “” Toạ độ x của tâm e-lip. Mặc định là “0” cy = “” Toạ độ y của tâm e-lip. Mặc định là “0” rx = “” 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 = “” 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ị...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: TÌM HIỂU SVG VÀ ỨNG DỤNG - 5

  1. Chương 3. Cấu trúc định dạng tập tin SVG Một số thuộc tính của thành phần ‘ellipse’: cx = “” Toạ độ x của tâm e-lip. Mặc định là “0” cy = “” Toạ độ y của tâm e-lip. Mặc định là “0” rx = “” 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 = “” 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. Example ellipse01 - examples of ellipses 80
  2. Chương 3. Cấu trúc định dạng tập tin SVG 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= “” Toạ độ x của điểm đầu. Mặc định là “0” y1= “” Toạ độ y của điểm đầu. Mặc định là “0” x2= “” Toạ độ x của điểm cuối. Mặc định là “0” y2= “” 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. Example line01 - lines expressed in user coordinates 81
  3. Chương 3. Cấu trúc định dạng tập tin 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= “” 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’. Example polyline01 - increasingly larger bars
  4. Chương 3. Cấu trúc định dạng tập tin SVG fill="none" stroke="blue" stroke-width="2" /> 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 = “” 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’. Example polygon01 - star and hexagon
  5. Chương 3. Cấu trúc định dạng tập tin SVG 423,301 350,250 277,301 303,215 231,161 321,161" /> 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 84
  6. Chương 3. Cấu trúc định dạng tập tin SVG 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 85
  7. Chương 3. Cấu trúc định dạng tập tin SVG 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). 86
  8. Chương 3. Cấu trúc định dạng tập tin SVG 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. 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”. 87
  9. Chương 3. Cấu trúc định dạng tập tin SVG
  10. Chương 3. Cấu trúc định dạng tập tin SVG 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. Example OrigCoordSys - Simple transformations: original picture ABC (orig coord system) 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 89
  11. Chương 3. Cấu trúc định dạng tập tin SVG 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. Example NewCoordSys - New user coordinate system ABC (orig coord system) ABC (translated coord system) 90
  12. Chương 3. Cấu trúc định dạng tập tin SVG Kết quả trên trình duyệt: Hình 3.19. Minh họa phép tịnh tiến 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 30o • 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 Example RotateScale - Rotate and scale transforms 91
  13. Chương 3. Cấu trúc định dạng tập tin SVG ABC (rotate) ABC (scale) 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. Example Skew - Show effects of skewX and skewY
  14. Chương 3. Cấu trúc định dạng tập tin SVG ABC (skewX) ABC (skewY) 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 93
  15. Chương 3. Cấu trúc định dạng tập tin SVG Ví dụ 6: Các phép biến đổi lồng nhau. Example Nested - Nested transformations ....Translate(1) ....Rotate(2) ....Translate(3) 94
  16. Chương 3. Cấu trúc định dạng tập tin SVG 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 ” (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() đượ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() đượ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 không được cung cấp thì được cho bằng 0. • scale([]) đượ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 không được cung cấp thì được gán bằng . 95
  17. Chương 3. Cấu trúc định dạng tập tin SVG • rotate([]) được dùng để định nghĩa một phép quay quanh một điểm được cho trước độ. Nếu tham số và 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ố và được cung cấp thì sẽ quay quanh điểm (,). Phép biến đỏi này tương đương với dãy các biến đổi sau: translate(,) rotate() translate(-,-cy>). • skewX() chỉ định một phép biến đổi xiên dọc theo trục x. • skewY() 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: Cũng có kết quả như định nghĩa các phép biến đổi riêng biệt sau: 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. 96
  18. Chương 3. Cấu trúc định dạng tập tin SVG 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 : 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ố , , và , đượ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. 97
  19. Chương 3. Cấu trúc định dạng tập tin SVG Lưu ý là giá trị và 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. 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. Stretch to fit 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’ 98
  20. Chương 3. Cấu trúc định dạng tập tin SVG 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: Để đạ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: 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ị hay 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’ 99
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2