Find X,Y in Transforms & ViewPorts

Elements are transformed and reside it different viewPorts. This example uses getScreenCTM and inverse to access x,y values.
Click on an element target.
This will place the black circle
so it matches the target's transformations

Scenerio:
1.) SVG image is inline, contained in a DIV.
2.) The blue rect element is contained in a <g>.
3.) The <g> element has been transformed.
4.) The maroon rect resides in a different viewPort.
5.) The orange circle has been transformed.
6.) Move cursor over elements to get their x,y values
6.) Click over element place black circle in its viewport or target's transform.
HTML Page Values:
mouse X: :mouse Y
SVG Image Values:
svg X: :svg Y
Target:
client X: :client Y
screen X: :screen Y

SVG Source:
Javascript: