Getting point information from SVG.

[popara]

Hi,

So there is one quircky thing about SVG when you are trying to get precise information about the position of pointer inside the SVG itself. Namely when you bind event handler to e.g. mousemove you would get for clientX, and clientY with values relative to the document, not the node I have bound my handler to.

This is somewhat normal because SVG uses different units potentially for internal drawing, and you need to transform those units into pixels relative to the SVG it self. Here is how you do it in dirty JS world:

function handler(e){
  var svg = document.getElementsByTagName("svg")[0]
  svg = document.querySelector('svg');
  var pt = svg.createSVGPoint();
  pt.x = e.clientX; 
  pt.y = e.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
 };

I just wanted to leave a note about this. I have no idea how to fix this nicely. My quick and dirty solution was to make native module, and stick similar code into it.

Better systematic solution requires much forethought, which I believe you can allocate to the issue. In mean time I will continue thinking about neat solution also :)

Further reading: https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[ondrejsevcik]

One possible solution - custom event https://discourse.elm-lang.org/t/custom-elements-extend-svg-real-coordinates-on-mouse-events/1762/4

[popara]

One super neat solution I have started using:

Overlay one transparent rect on top your svg, (aka put is last in the list, with transparent fill) and attach all events to it instead of parent svg.

Works like beauty.