JavaScript로 SVG의 SMIL 제어하기

Question

이 SVG 곤충이 있다고 가정 해 봅시다. 이 방법으로 불가능한 경우가 아니면 <img /> 또는 <object /> 태그로 삽입하고 싶습니다.

이제 insect.svg에는 걷기 용과 날기 용이라는 두 가지 애니메이션이 있습니다.

개별적으로 또는 HTML의 JavaScript에서 애니메이션을 시작/중지하고 싶습니다 (또는 HTML JavaScript에서 "walk"또는 "fly"로 임베드 SVG JS 함수를 호출 할 수 있습니다).

그래서 게임 플레이 중에 곤충을 날기를 원한다면 JS에 그렇게하도록 알리고 더 이상 날아 가지 말아야 할 때 멈추라 고 말하면됩니다. 걷는 것과 같습니다.

이렇게 할 방법이 있습니까? 나는 지난 1 시간 동안 인터넷 검색을 해왔고 실제 결과를 만들지 않았습니다. 문제가있는 경우 IE 지원에 신경 쓰지 않습니다.

감사합니다.

Answer 1

SMIL 애니메이션 하이퍼 링크를 사용해 볼 수 있습니다. URL에 # 뒤에 시작하려는 애니메이션의 ID를 넣습니다. 예를 들어 http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html을 참조하십시오. 마우스를 클릭하면 애니메이션이 시작될 때 URL이 변경됩니다. 당신이 파이어 폭스를 사용하는 경우 당신이 이런 식으로 뭔가를 갈 것이라고 자바 스크립트와 애니메이션을 시작하려면 SMIL 하이퍼 링크가 파이어 폭스 그렇지 않으면 12

에없는대로 ... 야간가 필요합니다

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

그러나 <img> 요소는 스크립팅을 허용하지 않으므로 작동하지 않습니다.