SVG-Koordinaten auf klicken nach dem Schwenken und Zoomen

Question

Ich blockiere auf eine dumme Sache, ich suche nach SVG-Koordinaten nach dem Klick. Aber mein SVG kann gezoomt und verschoben werden.

Dieses Beispiel mehr reden denke ich:

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

ich die Koordinaten unter dem schwarzen Kreis wollen. WICHTIG: Der schwarze Kreis ist nur eine Positionsanzeige, in meinem Fall irgendwo auf SVG. Ich habe gelesen: D3 click coordinates after pan and zoom aber es hat mir nicht geholfen.

EDIT: Ich meine, wenn der schwarze Kreis auf der linken Seite ist, bekomme ich X und Y, ich bewege den schwarzen Kreis rechts, ich bekomme das gleiche X Y Haben Sie einen guten Tag Codierung!

Answer 1

Es war so einfach ...

Zunächst sollten Sie einige Informationen erhalten:

• SVG.getScreenCTM()
• Translation X und Y
• Maßstab
• Client-Klickkoordinaten (d3.event.pageX und d3.event.pageY
)

WICHTIG: Verwenden Sie parseFloat, nicht 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 
    } 
} 

Um Übersetzungen und Skalenwerte, Verwendung: /.*translate\((-?\d+(.\d+)?),(-?\d+(.\d+)?)\)(scale\((-?\d+(.\d+)?)\))?/ mit $1$3 und $6.