Test if point outside pan-zoom bounds

Question

I want to test if the location of a particular SVG element is inside or outside of the currently visible pan-zoom region. If it's outside then I can pan to get it just inside the corresponding border.

This sounds like a simple operation, except that I cannot find the right test to see if a point is outside the visible region; if I can do that then I can handle the pan with no trouble.

The location I have is an untransformed one, as per the original element x/y attributes, and so I expected to have to access the appropriate CTM, but I cannot find this.

Answer 1

Oops, I posted the question a bit hastily. The CTM is tucked away on a specific <g> created by the pan-zoom library to surround your own SVG elements.

It can be found using:

var ctm = document.getElementById("svg-id").querySelector('.svg-pan-zoom_viewport').getCTM();

where svg-id is your own id for the <svg> element.

From that, it's easy to use the matrix calculation to map between old and new coordinate systems, as per transforming