在滚动条上触发SVG动画

Question

我想在用户滚动时触发SVG动画（即编码到SVG文件本身）。我相信这是通过在“”上设置“begin：indefinite”来完成的，然后当用户滚动时用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/