旋轉動畫停止時，如何確定元素的角度？

Question

我有一些符合SVG的，我在它上面的動畫旋轉，通過點擊鼠標點擊控制。

當按下鼠標（mousedown）時，動畫開始並旋轉180度。當鼠標被釋放時（mouseup），動畫將終止。

問題是我不知道動畫終止的角度。這會產生一個問題，因爲javascript會假定動畫已成功將SVG旋轉180度，並且會從不正確的點開始下一個動畫序列。

這個問題的一個例子可以在JSFiddle找到。我懷疑這個解決方案與DOM有關，但我正在努力挖掘所有可用的信息。

Answer 1

你可以讀出使用SVG DOM這樣的動畫值...

$('#control1').mouseup(function() { 
    // get the animation element 
    var anim = document.getElementById("rotatePolysvg3"); 

    // stop the animation (in case it is running) 
    anim.endElement(); 

    var g = document.getElementById("polysvg2"); 

    if (g.transform.animVal.numberOfItems > 0) { 
     alert(g.transform.animVal.getItem(0).angle); 
    } 

});