SVG animation does not set attributes as expected

Question

I am trying to animate the changing of the viewport of an SVG element. When a particular ellipse in the SVG is clicked the viewport is changed so that it is zoomed in on the ellipse. From my interpretation of the W3C animate specification, when fill="freeze" is used, the value in the to attribute will stay. However, when I use console.log("after animation: "+canvas.getAttribute("viewBox")); the viewBox is the same as before (the animation does zoom in). For extra info, the <animate> is added when the ellipse is clicked. This is the code for how the animation is added to the <svg>;

var canvassnap=Snap(canvas);
var animation = '<animate id="smoothpan" attributeName="viewBox" begin="0s" dur="'+duration+'ms" from="0 0 1280 720" to="'+minX+' '+minY+' '+(maxX-minX)+' '+(maxY-minY)+'" fill="freeze" />';
var parse = Snap.parse(animation);
canvassnap.add(parse);

Do I not understand the specification properly?

Answer 1

SVG has two values for each attribute, the base value which you can get either with getAttribute or via element.viewBox.baseVal and the animated value which you can get via element.viewBox.animVal.

If an element is not the subject of SMIL animation then animVal == baseVal.

SMIL animation only affects the animVal and it's the animVal that is used for rendering.