Is it possible to obtain the real coordinates within the SVG if the user has zoomed in/out?

[Andrés Pérez]

Hey!

First of all, thanks a lot for this amazing library, it's incredibly powerful and easy to use 😁.

I wanted to ask if it's possible to obtain the real coordinates within the SVG if the user has zoomed in/out. This is because I have an event listener that creates elements on the coordinates where the users clicks, but if they have zoomed in/out, I can't use the values I have been using.

          customizableSvg.on('click', (e) => {
            customizableSvg.add(
              new Rect({
                height: 20,
                width: 40,
                x: e.offsetX,
                y: e.offsetY,
                style: 'fill: cyan',
              })
            );

The previous code works if I don't zoom in or move around, but is it possible to get the real coordinates even if I have moved the SVG around?

[Ulrich-Matthias Schäfer]

use element.point() and pass in x and y to get the coordinates in the elements coordinate system (e.g. canvas.point(x, y))

[Andrés Pérez]

That was it, thanks a lot @Fuzzyma!

In case it is of any help for someone in the future

// e is the event we're handling
const { x, y } = canvas.point(e.pageX, e.pageY);

[Ulrich-Matthias Schäfer]

You probably wanna use e.clientX instead. Then it will also work when the page is scrolled