Je sais que les questions concernant les coordonnées svg de la souris ont déjà été posées ici, mais je suis assez perplexe face au comportement actuel et aucun des threads ne semble vraiment l'aborder.SVG Capturer les coordonnées de la souris
Procédé j'utiliser pour capturer les coordonnées:
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 + ")");
}
Le problème est lié à la conversion de coordonnées de clic de souris dans le SVG Coordonnées dans l'espace de l'utilisateur. J'utilise les coordonnées pour faire glisser un rectangle sur l'écran, et comme le curseur se déplace vers la droite dans l'espace svg, les coordonnées deviennent de plus en plus faussées. Pour tester ceci d'une manière simple, j'ai mis trois rectangles dans l'espace svg global à (100, 500), (500, 500), (1000, 500) et (1000, 200). En utilisant une simple fonction de journalisation, les coordonnées que je reçois (plus ou moins 5 pour l'imprécision de la souris) sont (98, 473), (487, 470), (969, 471), (969, 190). Comme vous pouvez le voir le long de l'axe x ou y, la souris disparaît, plus elle devient inexacte. J'ai essayé de reproduire cela dans un violon en utilisant la même méthode pour capturer les coordonnées de la souris, mais je ne peux pas le reproduire ici ... Une chose à noter qui peut être significative est le fait que lorsque je connecte le document svg, la largeur et la hauteur sont définies à des valeurs légèrement inférieures aux valeurs de la vue, c'est-à-dire. 1380 largeur et 676 hauteur étant donné la valeur de la fenêtre "0 0 1400 700". Quoi qu'il en soit, voici le violon, toutes les propriétés svg sont les mêmes que dans mon programme.