在滚动时触发SVG动画

Question

我想在用户向下滚动时触发SVG动画（编码到SVG文件本身中）。我相信这是通过设置＆＃34;开始：无限期＆＃34; on＆＃34;＆＃34;然后在用户滚动时用jquery / js将其设置为0？我尝试过的任何东西似乎都没有工作，所以我想知道是否有人可以给我一些更好的方向来实现这个目标。

Answer 1

将动画元素的开始时间设置为“0”表示它在文档加载后立即开始。由于文档已经在用户滚动时加载，因此此时不会产生任何影响。

要使用Javascript触发动画元素，请使用beginElement()或beginElementAt(delayInSeconds)方法。第一种方法立即启动元素，第二种方法在指定的延迟后启动。 More info in the SVG specs

window.addEventListener('scroll', function(e){
    document.getElementById("animateOnScroll")
        //.setAttribute("begin", 0); //this doesn't work!
        .beginElement(); //this does!
});

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