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

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);
    }

});