getting proper mouse position inside a zoomable iframe

Question

I have a project on svg-edit where i have to create polygon on mouse-click , the svg-canvas (not HTML5 canvas suppose as drawing board) is zoomable, i can create polygon on 100% zoom but when i zoomin or zoomout i can't, actually i am unable to get right x and y position after zoom.as you can see in image.

I had tried this method to get points--

//Container 1440*1920
var svgcanvas = document.getElementById("svgcanvas");
//zoom
var initialZoom = 1440 * 1920;
zoomWidth = parseFloat(svgcanvas.style.width);
zoomHeight = parseFloat(svgcanvas.style.height);
currentZoom = zoomHeight * zoomWidth;
zoom = currentZoom / initialZoom;
//points
var rect = event.target.getBoundingClientRect();
var x1 = ((event.clientX) / zoom) - rect.left;
var y1 = ((eevent.clientY) / zoom) - rect.top;

and my task is

Answer 1

It seems you are not interacting with the svg-edit API at all. Things get much easier if you do.

// do not interact with the DOM element, but with the API object
var svgcanvas = svgEditor.canvas;

// your event listener function
function listener (event) {
    var rect = svgcanvas.getBBox(event.target);
    var x1 = rect.x;
    var y = rect.y;
    ...
}

No need to handle zooming; the SvgCanvas instance does that for you.