0

I'm blocking on a stupid thing, I'm looking for SVG coordinates after on click. But my SVG can be zoomed and moved.

This example will talk more I think :

http://blockbuilder.org/Servuc/36931fc3950218df024d0aa7ff8c8d3c

I want the coordinates of under the black circle. IMPORTANT : The black circle is just a position indication, in my case in click somewhere on SVG.

I've read that : D3 click coordinates after pan and zoom but it didn't help me.

EDIT : I mean if the black circle is on the left, I get X and Y, I move the black circle on right, I get the same X Y Have a good coding day !

Community
  • 1
  • 1
Servuc
  • 328
  • 1
  • 4
  • 16

1 Answers1

0

It was so simply ...

First, you should get some informations :

  • SVG.getScreenCTM()
  • Translation X and Y
  • Scale
  • Client click coordinates ( d3.event.pageX and d3.event.pageY )

IMPORTANT : Use parseFloat, not parseInt ;)

function screenToSvg(x, y, translateX, translateY, scale) {
    var myScreenCTM = $("svg")[0].getScreenCTM();
    return {
        x : ( x - myScreenCTM.e - translateX ) / scale,
        y : ( y - myScreenCTM.f - translateY ) / scale
    }
}

To get translations and scale values, use : /.*translate\((-?\d+(.\d+)?),(-?\d+(.\d+)?)\)( scale\((-?\d+(.\d+)?)\))?/ with $1 $3 and $6.

Servuc
  • 328
  • 1
  • 4
  • 16