sé preguntas con respecto a las coordenadas SVG ratón se ha pedido aquí antes, pero estoy bastante desconcertado por el comportamiento actual que estoy experimentando y ninguno de los hilos bastante parece dirigirse a él.SVG Captura de coordenadas del ratón
El método que utilizo para la captura de coordenadas:
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 + ")");
}
El problema es con la conversión de coordenadas clic del ratón en el SVG coordenadas en el espacio de usuario. Estoy usando las coordenadas para dibujar un rectángulo en la pantalla, ya medida que el cursor se más a la derecha en el espacio SVG las coordenadas vuelto más y más sesgada. Para probar esto de una manera simple, puse tres rectángulos en espacio global SVG al (100, 500), (500, 500), (1000, 500), y (1000, 200). El uso de una simple función de registro de las coordenadas I reciben (más o menos 5 por imprecisión ratón) son (98, 473), (487, 470), (969, 471), (969, 190). Como puede ver, cuanto más avanza el eje xoy el mouse, más impreciso se vuelve. Traté de replicar esto en un violín con el mismo método para capturar las coordenadas del ratón, pero no puedo replicar allí ... Una cosa más tener en cuenta que puede ser importante es el hecho de que cuando me conecto el documento SVG, el ancho y la altura se establecen en valores ligeramente menores que los valores de viewbox, es decir. 1380 de ancho y 676 de altura dado el valor de la vista de "0 0 1400 700". De todos modos, aquí está el violín, todas las propiedades svg son las mismas que están en mi programa.