Ich weiß, dass hier bereits Fragen zu SVG-Mauskoordinaten gestellt wurden, aber ich bin ziemlich verwirrt über das aktuelle Verhalten, das ich erlebe, und keiner der Threads scheint sich ganz damit zu befassen.

Die Methode, die ich zum Erfassen von Koordinaten verwende:

var pt = svg.createSVGPoint();  // Created once for document

function alert_coords(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;

    // The cursor point, translated into svg coordinates
    var cursorpt =  pt.matrixTransform(svg.getScreenCTM().inverse());
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");
}

Das Problem besteht darin, dass Mausklickkoordinaten in SVG-Koordinaten im Benutzerbereich konvertiert werden. Ich benutze die Koordinaten, um ein Rechteck über den Bildschirm zu ziehen, und je weiter der Cursor im SVG-Bereich nach rechts bewegt wird, desto mehr verzerren sich die Koordinaten. Um dies auf einfache Weise zu testen, platziere ich drei Rechtecke im globalen SVG-Raum bei (100, 500), (500, 500), (1000, 500) und (1000, 200). Mit einer einfachen Protokollierungsfunktion erhalte ich die Koordinaten (plus oder minus 5 für Mausungenauigkeit) (98, 473), (487, 470), (969, 471), (969, 190). Je weiter die Maus entlang der x- oder y-Achse fährt, desto ungenauer wird sie. Ich habe versucht, dies in einer Geige mit der gleichen Methode zum Erfassen von Mauskoordinaten zu replizieren, aber ich kann es dort nicht replizieren ... Eine weitere wichtige Sache ist die Tatsache, dass beim Protokollieren des SVG-Dokuments die Breite und height werden auf Werte gesetzt, die geringfügig unter den Viewbox-Werten liegen, d. h. 1380 Breite und 676 Höhe bei dem Viewbox-Wert "0 0 1400 700". Wie auch immer, hier ist die Geige, alle Svg-Eigenschaften sind die gleichen wie in meinem Programm.

http://jsfiddle.net/ASLma/11/