旋转动画停止时如何确定元素的角度？

Question

我有一些在线SVG，我正在为它设置一个旋转动画，通过鼠标点击div进行控制。

当按下鼠标（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);
    }

});