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

Chương 3. Cấu trúc định dạng tập tin SVGMộ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ị...
Nội dung trích xuất từ tài liệu:
TÌM HIỂU SVG VÀ ỨNG DỤNG - 5Chươ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 80Chươ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 81Chươ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 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 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ị đo3.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ướngtrong 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 (SVGviewport). Đố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ởimộ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ôngtườ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ùngSVG đượ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 t ...