e

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
SVG width is responsive, view is 200,200, rect is 100,100
<svg id="svg" version="1." xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 200 200">  
    
        <rect x="0" y="0" width="200" height="200" fill="yellow"/>
        <rect x="0" y="0" width="100" height="100" fill="gray"/>
    <circle cx="25" cy="25" r="5"/>
</svg>

JavaScript

var s = Snap("#svg");

console.log( 'local', s.transform().localMatrix.toTransformString() );
console.log( 'global', s.transform().globalMatrix.toTransformString() );



s.mousedown(function(event) {
   
    var matrix = s.transform().diffMatrix.invert();
    console.log( matrix );

    var x = matrix.x(event.pageX - s.node.offsetLeft, event.pageY - s.node.offsetTop);
    var y = matrix.y(event.pageX - s.node.offsetLeft, event.pageY - s.node.offsetTop);

    addSomeText(x,y)
});

function addSomeText(x,y) {
	s.text(x,y, x+','+y);
}