SVG animation 누적 값을 적용하는 방법

Question

javascript에서 일부 SVG 내의 요소를 회전해야하는 작업을하고 있습니다. SVG 항목을 설정하고 애니메이션을 정의한 다음 SVG 자체 (js에서) 외부의 임의 이벤트를 기반으로 애니메이션을 실행하는 방법을 테스트했습니다. 애니메이션을 실행하기 전에 회전 각도와 회전 속도를 설정합니다.

이 모든 것이 정상적으로 작동합니다.

내 문제는 애니메이션이 완료되면 svg가 원래 상태로 되돌아갑니다. 즉, SVG를 90 도로 회전하면 애니메이션이 완료되면 SVG가 즉시 0으로 되돌아갑니다.

나는 S에서 svg doco를 보았습니다. 특히 첨가물과 누적 옵션이 있지만 작동하지 않습니다.

나는 그것이 사소한 것이라고 확신하지만 문제의 원인이 무엇인지 알 수 없습니다. 로버트에

JSfiddle example of the problem

덕분에 나는 해결책을 가지고 있습니다. 아래에 솔루션을 추가했습니다.

JSfiddle example of the solution

Answer 1

는 채우기 = animateTransform 요소에 "동결"추가합니다.