滾動觸發SVG動畫

Question

當用戶向下滾動時，我想觸發SVG動畫（編碼到SVG文件本身中）。 我相信這是通過在“”上設置“ begin：indefinite”，然后在用戶滾動時使用jquery / js將其設置為0來完成的？ 我嘗試過的任何方法似乎都沒有用，所以我想知道是否有人可以給我一些更好的指導以實現這一目標。

Answer 1

將動畫元素的開始時間設置為“ 0”將指示其在文檔加載后立即開始。 由於文檔在您的用戶滾動時已經加載，因此在那時將不起作用。

要使用Javascript觸發動畫元素，請使用beginElement()或beginElementAt(delayInSeconds)方法。 第一種方法立即啟動元素，第二種方法在指定的延遲后啟動。 SVG規范中的更多信息 。

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

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