cuando se trabaja con <svg> en FireFox, getScreenCTM() no tiene en cuenta las transformaciones aplicadas fuera del elemento <svg> más externo.

aplicar una transformación a un <div> envolvente provocará un comportamiento no deseado. aquí hay un ejemplo: JSFiddle: getScreenCTM() no funciona en FireFox

Si se abre en Chrome, todo funciona bien. en FireFox, ni la rotación ni la escala aplicadas en los elementos <div> externos tienen ningún efecto de SVGMatrix que se devuelve desde rect.getScreenCTM().inverse() , separando así el elemento <rect> de la posición del mouse.

Si comenta las secciones #scale y #rotate del archivo CSS, obtendrá una matriz de transformación diferente en Chrome (como se esperaba) y la misma en Firefox, que es exactamente el problema.

Intenté solucionar esto aplicando las transformaciones <div> manualmente, como se ve aquí: JSFiddle: aplicación manual de transformaciones

Esto no funcionó ni produjo un resultado consistente en Chrome y FireFox.

He visto varios informes sobre Bugzilla de hace años que describen un error similar, pero estos son muy antiguos. También hay preguntas aquí de StackOverflow con respecto al asunto, pero no son exactamente iguales, además, la última se publicó en 2016.

Estoy tratando de abordar esto por un tiempo y estoy completamente perdido. ¡La ayuda sería muy apreciada!