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

Chương 3. Cấu trúc định dạng tập tin SVG• ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’. • ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường. • ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo thời gian. Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của phép biến...
Nội dung trích xuất từ tài liệu:
TÌM HIỂU SVG VÀ ỨNG DỤNG - 8Chương 3. Cấu trúc định dạng tập tin SVG • ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’. • ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường. • ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo thời gian. Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính ‘transform’. • Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’). • Thành phần ‘mpath’: SVG cho phép một thành phần ‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến một thành phần ‘path’ để định nghĩa một đường di chuyển. • Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc độ của ảnh động trên đường di chuyển. • Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần ‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến của đường di chuyển. 140Chương 3. Cấu trúc định dạng tập tin SVG Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếuURI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạtảnh. SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho“thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu”(document end). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML vàđôi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tàiliệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gianngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kếtthúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giảiphóng và không còn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thànhphần ‘svg’ được lồng trong một tài liệu SVG sẽ không tạo thành phân đoạn tài liệutrong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cảcác giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cáchtương đối với thời gian tài liệu của thành phần ‘svg’ gốc. Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vịtrí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phânđoạn tài liệu được cho.3.18.3 Ví dụ ảnh động: Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển(motion path). Example animMotion01 - demonstrate motion animation computations Chương 3. Cấu trúc định dạng tập tin SVG with three small circles at the start, middle and end. --> Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s: Hình 3.37. Minh họa thành phần ảnh động animateMotion3.19 Viết script (kịch bản)3.19.1 Chỉ định ngôn ngữ viết script3.19.1.1 Chỉ định ngôn ngữ viết script mặc định Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viếtscript mặc định cho phân đoạn tài liệu cho trước. • contentScriptType = “content-type” 142Chương 3. Cấu trúc định dạng tập tin SVG Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước. Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các “chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript” chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được đăng kí.3.19.1.2 Khai báo cục bộ ngôn ngữ viết script Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêngbiệt bằng thuộc tính ‘type’ trên thành phần ‘script’.3.19.2 Thành phần ‘script’ Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đán ...