How to map a point from Browser’s Coordinate System to SVG’s Coordinate System

This topic describes how to map a clicked point (i.e. in Browser’s coordinate system) to a corresponding point in SVG’s coordinate system.

Why we need ?

GML uses this simple logic to implement “GroupBy” functionality, https://www.youtube.com/watch?v=FOI7ektZ04E .(Tutorial).

GML uses SVG tag as a canvas where users can design any graph.

And, transform matrix of svg tag is used as a way to transform the canvas, e.g. move the canvas to the left, zoom in, etc.

In “Group By” functionality, users can create a blue rectangular box by clicking and moving in order to select multiple nodes.

When users click a canvas with a mouse, we need to find what (x,y) values are appropriate within “transformed” svg tag.

If svg is transformed by something like zoom in, etc, then we cannot simply use (x’,y’) value of OnClick event.

Here, recall the transform matrix functionality of svg tag:

Then, a ~ f values can be specified in “transform” attribute of svg tag.

Here, (x’, y’) can be considered as a point in Browsers’s coordinate system whereas (x,y) can be considered as a point in svg tag coordinate system.

So, what we want to do is just to find what (x,y) values are appropriate, given (x’,y’) point.

So, we can just find the inverse matrix of transform matrix and apply it to get (x,y) values in Svg world.

Note:

If your web site has something like header, then you need to adjust your clicked point (x’, y’). (x’,y’) should be adjusted to a point from the upper left corner of svg tag.

For example, if you have a header with 100 height, then you need to subtract 100 for y’s value beforehand to apply the inverse matrix.