Question

I’ve got some in line SVG and I’m animating a rotation on it, controlled via mouse clicks on a div.

When the mouse is pressed (mousedown) the animation starts and will rotate up to 180 degrees. When the mouse is released (mouseup) the animation will terminate.

The problem is that I don’t know at what angle the animation terminated. This creates a problem as the javascript presumes the animation successfully rotated the SVG 180 degrees and as such will start the next animation sequence from the incorrect point.

An example of this problem can be found at JSFiddle. I suspect the solution is related to the DOM but I’m getting lost trying to dig through all the information available.

Answer 1

You can read off the animated value using the SVG DOM like this…

$('#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);
    }

});