SVG's Four(4) X,Y Values

Their are four x,y values used in dynamic SVG, defined herein as follows: html document(htm), svg image(svg), screen matrix transform(scr), element transform(trn), .
Scenerio:
A 400x400 DIV contains the SVG Image.
The SVG Image has a viewBox = 0 0 1200 1200
The blue rectangle has been transformed.
The red circle is not transformed.

Move the cursor over the SVG Image:
1.) htm - the cursor position anywhere over the html document.
2.) svg - the cursor position anywhere over the svg image(400x400).
3.) scr - the cursor position computed in the parent ViewPort(1200x1200).
4.) trn - the cursor position computed in the transformed element.
The black dot will follow the cursor inside the target element.
htm  X:  Y:
svg  X:  Y:
scr  X:  Y:
trn  X:  Y:

SVG Source:
Javascript: