Đang tải... (xem toàn văn)
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ương Cấu trúc định dạng tập tin SVG Một số thuộc tính thành phần ‘ellipse’: cx = “” Toạ độ x tâm e-lip Mặc định “0” cy = “” Toạ độ y tâm e-lip Mặc định “0” rx = “” Bán kính trục x e-lip Không nhận giá trị âm Giá trị âm gây lỗi Nếu giá trị “0” thành phần không hiển thị ry = “” Bán kích trục y e-lip Khơng nhận giá trị âm Giá trị âm gây lỗi Nếu giá trị “0” thành phần khơng hiển thị Ví dụ 1: Ví dụ sau xây dựng hai hình e-lip hệ trục toạ độ người dùng thiết lập thuộc tính ‘viewBox’ thành phần ‘svg’ thuộc tính ‘transform’ thành phần ‘g’ ‘ellipse’ Cả hai e-lip dùng giá trị mặc định cho thuộc tính ‘cx’ ‘cy’ (tâm e-lip) Hình e-lip thứ hai quay lệch góc Example ellipse01 - examples of ellipses 80 Chương Cấu trúc định dạng tập tin SVG Kết 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 đoạn thẳng bắt đầu điểm kết thúc điểm khác Một số thuộc tính thành phần ‘line’ x1= “” Toạ độ x điểm đầu Mặc định “0” y1= “” Toạ độ y điểm đầu Mặc định “0” x2= “” Toạ độ x điểm cuối Mặc định “0” y2= “” Toạ độ y điểm cuối Mặc định “ Ví dụ 1: Ví dụ sau xây dựng năm đoạn thẳng hệ trục toạ độ người dùng thiết lập thuộc tính ‘viewBox’ thành phần ‘svg’ Các đoạn thẳng có độ dày khác Example line01 lines expressed in user coordinates 81 Chương Cấu trúc định dạng tập tin SVG Kết qủa 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 tập đoạn thẳng nối trực tiếp với Thành phần ‘polyline’ định nghĩa hình mở Một số thuộc tính thành phần ‘polyline’: points= “” Mảng điểm tạo nên đường gấp khúc Giá trị toạ độ tính theo hệ trục toạ độ người dùng Ví dụ 1: Ví dụ sau xây dựng đường gấp khúc hệ trục tọa độ người dùng thiết lập thuộc tính ‘viewBox’ thành phần ‘svg’ Example polyline01 increasingly larger bars Kết 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 đa giác Một số thuộc tính thành phần ‘polygon’: points = “” Mảng điểm tạo nên đa giác Tất toạ độ tính theo hệ trục toạ độ người dùng Ví dụ 1: Ví dụ sau xây dựng hai hình đa giác (một lục giác) hệ trục toạ độ người dùng thiết lập thuộc tính ‘viewBox’ thành phần ‘svg’ Example polygon01 - star and hexagon 3.12 Hệ trục toạ độ, phép biến đổi đơn vị đo 3.12.1 Giới thiệu Đối với tất phương tiện (media), phông SVG (SVG canvas) “không gian để hiển thị nội dung SVG” Phơng khơng giới hạn hướng không gian, nội dung SVG hiển thị phạm vi hình chữ nhật phơng Phạm vi hình chữ nhật gọi khung nhìn SVG (SVG viewport) Đối với phương tiện trực quan (visual media), khung nhìn SVG phạm vi mà người dùng nhìn thấy nội dung SVG Kích thước khung nhìn SVG (chiều dài, chiều rộng) xác định trình thoả thuận phân đoạn tài liệu SVG cha (có thực hay khơng tường minh) Một q trình thoả thuận hồn tất, tác nhân người dùng SVG cung cấp thơng tin sau: • Một số đại diện cho chiều dài tính đơn vị “điểm ảnh” (pixels) khung nhìn • Một số đại diện cho chiều rộng tính đơn vị “điểm ảnh” khung nhìn • (khơng bắt buộc) giá trị số thực xác định kích thước giới thực “điểm ảnh” (là mm chẳng hạn) Dùng 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) hệ trục toạ độ người dùng ban đầu (user coordinate system) Cả hai hệ trục toạ độ có gốc toạ độ trùng với gốc toạ độ khung nhìn (đối với khung nhìn gốc gốc toạ độ 84 Chương Cấu trúc định dạng tập tin SVG khung nhìn góc trái trên) Một đơn vị toạ độ hệ trục toạ độ ban đầu “điểm ảnh” khung nhìn Hệ trục toạ độ khung nhìn cịn gọi khơng gian khung nhìn (viewport space) hệ trục toạ độ người dùng gọi không gian người sử dụng (user space) Giá trị chiều dài SVG đo sau: • Nếu khơng có đơn vị kèm theo, ví dụ “15”, tính theo giá trị đơn vị hệ trục toạ độ người dùng • Nếu có đơn vị kèm theo, ví dụ “15m” hay “5cm”, tính theo hệ đo lường Các đơn vị chiều dài hỗ trợ : em, ex, px, pt, pc, cm, mm, in % Một không gian người dùng (nghĩa hệ trục toạ độ mới) thiết lập nơi phân đoạn tài liệu SVG phép biến đổi (transformations) dạng ma trận biến đổi (transformation matrices) hay phép biến đổi đợn phép quay (rotate), xiên (xskew, yskew), tỉ lệ (scale) tịnh tiến (translate) Thiết lập không gian người dùng phép biến đổi hệ trục toạ độ tảng cho đồ họa 2D, cung cấp phương thức thông thường cho việc kiểm sốt kích thước, vị trí, góc quay, độ xiên đối tượng đồ hoạ Một khung nhìn thiết lập Bằng cách thiết lập khung nhìn mới, định nghĩa phạm vi hình chữ nhật để đối tượng đồ họa hiển thị vừa khít 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 xây dựng nội dung SVG Trong số trường hợp, nội dung SVG nhúng tài liệu khác (tài liệu chứa) Tài liệu chứa có thuộc tính tham số dùng để định hay 85 Chương Cấu trúc định dạng tập tin SVG cung cấp thơng tin kích thước khung nhìn cho nội dung SVG Nội dung SVG, 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’ ‘height’ thành phần ‘svg’ ngồi Q trình thoả thuận sử dụng thơng tin cung cấp tài liệu chứa nội dung SVG để chọn vị trí kích thước khung nhìn cho nội dung SVG Thuộc tính ‘width’ thành phần ‘svg’ thiết lập chiều dài khung nhìn, trừ trường hợp sau: • Nội dung SVG tài nguyên lưu trữ độc lập nhúng tham chiếu (chẳng hạn, nhúng vào tài liệu XHTML qua thành phần ‘object’), nội dung SVG nhúng tài liệu chứa • Và thành phần tham chiếu tới nội dung SVG hay tài liệu chứa định kiểu trang định kiểu CSS hay XSL • Và có thuộc tính định vị tương thích CSS định thành phần tham chiếu (ví dụ thành phần ‘object’) hay thành phần ‘svg’ ngồi tài liệu chứa có khả thiết lập chiều dài khung nhìn Trong trường hợp này, thuộc tính định vị thiết lập chiều dài khung nhìn Tương tự, có thuộc tính định vị định thành phần tham chiếu tới tập tin SVG hay thành phần ‘svg’ tài liệu chứa có khả thiết lập chiều rộng khung nhìn, thuộc tính định vị thiết lập chiều rộng khung nhìn; ngược lại, thuộc tính ‘height’ thành phần ‘svg’ nội dung SVG thiết lập chiều rộng khung nhìn Nếu thuộc tính ‘width’ hay ‘height’ thành phần ‘svg’ đo theo đơn vị ngừơi dùng (khơng có định đơn vị đo), giá trị tính theo đơn vị px (pixel) 86 Chương Cấu trúc định dạng tập tin SVG Ví dụ 1: Trong ví dụ sau, ảnh SVG nhúng nội tuyến tài liệu XML định dạng theo CSS Bởi thuộc tính định vị CSS khộng cung cấp thành phần ‘svg’ ngồi cùng, nên thuộc tính width= “100px” height = “200px” xác định kích thước khung nhìn ban đầu 3.12.3 Hệ trục toạ độ ban đầu Đối với thành phần SVG nội dung SVG, tác nhân người dùng SVG xác định hệ trục tọa độ khung nhìn (viewport coordinate system) ban đầu hệ trục toạ độ người dùng (user coordinate system) ban đầu Gốc toạ độ hai hệ trục toạ độ trùng với gốc toạ độ khung nhìn, đơn vị hệ trục toạ độ ban đầu “điểm ảnh” (pixel) Trong hầu hết trường hợp, tài liệu SVG độc lập hay phân đoạn tài liệu SVG nhúng tài liệu XML cha, hệ trục toạ độ khung nhìn ban đầu có gốc toạ độ nằm góc trái khung nhìn với trục x hướng từ trái sang phải, trục y từ xuống Ví dụ 1: Ví dụ hệ trục toạ độ ban đầu với gốc toạ độ nằm góc trái trục x hướng sang phải, trục y hướng từ xuống Hệ trục toạ độ người dùng ban đầu có đơn vị người dùng “pixel” 87 Chương Cấu trúc định dạng tập tin SVG