SVG: when to use animVal / baseVal

Question

When does animVal and baseVal of an SVG element differ? When is the appropriate time to use them to get the correct value? The verbatim difference can be read based on here, but I am more concerned when all these values can differ. Any transformation, or scaling affects it?

Form another post at SO here

function rectCorner(rect){
    pt.x = rect.x.animVal.value + rect.width.animVal.value;
    pt.y = rect.y.animVal.value + rect.height.animVal.value;
    return pt.matrixTransform(rect.getTransformToElement(svg));
}

What is the rationale using animVal here?

Answer 1

These properties only vary when using the SVG Animation Elements <animate>, <set>, <animateColor>, <animateTransform>, or <animateMotion>. As noted in the link you provided, baseVal and animVal will be the same if there is not explicit animation being applied.

The rationale for using animVal in the above is that it will be the same as baseVal under most circumstances, but on the off chance that animation is applied and running it will represent the current value of the attribute instead of the value at some point in the past.