SVG Coordinate Translator

 

svg

I was unhappy with the various contorted examples I found on the Intenet that attempt to do this.  Far too fancy by half, and way too enamored with using advanced JS6 constructs for their own sake.

So I wrote my own:  the translate function.

It is is super fast, super efficient, very easy to understand, and is the holy grail of what I have been looking for since I started this project a few weeks or so ago:  the ability to click on any part of the XVG surface (ie, the SVG area where the designer can do his or her work), and get an exact X/Y coordinate back, no matter what the display screen size or applied transfor might be.

Nifty.

You can see it in action here.

 

 

ps:  if you have any trouble following my latest pen, here is an excellent, no nonsense no glib, fancy talk explanation of JS event listeners.  I wrote my function after watching the first 5 minutes of this.