Kiểm soát SMIL của SVG với JavaScript

Question

Giả sử tôi có SVG này của côn trùng. Trừ khi nó là không thể theo cách này, tôi muốn chèn nó như là <img /> hoặc <object /> thẻ.

Hiện tại, côn trùng .svg có hai hoạt ảnh: một để đi và các hoạt động khác để bay.

Tôi muốn bắt đầu/dừng các hoạt ảnh này, riêng lẻ và từ JavaScript của JavaScript (hoặc gọi hàm nhúng SVG JS "đi bộ" hoặc "bay" khác, từ JavaScript HTML).

Vì vậy, cuối cùng, nếu trong khi chơi game, tôi muốn côn trùng của mình bay, tôi chỉ có thể thông báo cho nó để làm như vậy với JS, và bảo nó dừng lại khi nó không bay nữa. Cùng với đi bộ.

Có cách nào để thực hiện việc này không? Tôi đã được Googling trong giờ qua và không có phát hiện thực sự. Tôi không quan tâm đến hỗ trợ của IE nếu đó là vấn đề.

Cảm ơn bạn đã dành thời gian!

Answer 1

Bạn có thể thử sử dụng SMIL Animation Hyperlinking. Bạn đặt id của hoạt ảnh bạn muốn bắt đầu sau # trên URL. Xem ví dụ http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html - URL thay đổi khi nhấp chuột và bắt đầu hoạt ảnh. Nếu bạn đang sử dụng Firefox, bạn sẽ cần một đêm như SMIL Hyperlinking không có trong Firefox 12.

Nếu không, nếu bạn muốn bắt đầu một hình ảnh động với javascript nó sẽ đi một cái gì đó như thế này ...

var svgDocument = document.getElementById("objectId>").getSVGDocument(); 
svgDocument.getElementById('<animationElementId>').beginElement(); 

Nhưng điều này sẽ không hoạt động với phần tử <img> vì điều đó không cho phép tạo tập lệnh.