Native Point On Transformed Element: getCTM vs getScreenCTM

When an element has been transformed, either individually, and/or inside a tranformed container, it is important to be able to find native points on the transformed element. These 'native' points can then be referenced to svg 'image' points, and visa versa. getCTM used to obtain points in the transformed element and operate on them. getScreenCtM used to obtain a points in the transformed element , and use it within the transformed element.
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 have been transformed.
5.) The red circle is not transformed.
6.) Click at element to show its native point.
*Get Element Point - getCTM:
redCircle clicked: black circle to its center.
blueRect clicked: black circle to its corner.
maroonRect clicked: black circle to its corner.
orangeCircle clicked: black circle to its center.
*This feature works only if the SVG ViewBox,
or its width/height is the same size as the DIV
getScreenCTM:
The black circle receive the transform of the clicked element,
and it will be placed at the 'native' point clicked.
Target:
htmX: htmY:
SvgX: SvgY:
Clicked native point on element
NatX: NatY:

SVG Source:
Javascript: