스크롤시 SVG 애니메이션 트리거

Question

사용자가 아래로 스크롤 할 때 발생하는 SVG 애니메이션 (SVG 파일 자체에 코딩 된)을 트리거하고 싶습니다. 나는 이것이 "begin : indefinite"를 ""로 설정 한 다음 사용자가 스크롤 할 때 jquery/js를 사용하여 0으로 설정한다고 생각하십니까? 내가 시도한 것은 아무 것도 작동하지 않는 것 같아서 누군가가 나에게이 일을 수행하는 방법에 대해 더 나은 방향을 제시 할 수 있는지 궁금해하고 있었다.

Answer 1

애니메이션 요소의 시작 시간을 "0"으로 설정하면 문서가로드 된 직후에 시작되도록 지시합니다. 사용자가 스크롤 할 때까지 문서가 이미로드되었으므로 그 시점에서 문서가 적용되지 않습니다.

자바 스크립트를 사용하여 애니메이션 요소를 트리거하려면 beginElement() 또는 beginElementAt(delayInSeconds) 메소드를 사용하십시오. 첫 번째 메소드는 요소를 즉시 시작하고 두 번째 메소드는 지정된 지연 후에 요소를 시작합니다. More info in the SVG specs.

http://fiddle.jshell.net/k95aZ/