Estoy tratando de calcular las coordenadas viewBox de un svg de un evento de clic usando
const { x, y } = new DOMPoint(event.clientX, event.clientY) .matrixTransform(svg.getScreenCTM().inverse());Mi svg vive dentro de un contenedor que se transforma con CSS (traducir). En Chrome, todo funciona bien, en Firefox, las coordenadas correctas de viewBox se calculan solo si elimino la transformación CSS.
¿Qué se puede hacer? Cualquier ayuda sería muy apreciada.
El comportamiento diferente que está viendo en Chrome probablemente se deba a que es un poco más avanzado en su compatibilidad con los cambios de especificación de SVG 2.
En la definición de getScreenCTM en la especificación SVG 2 dice que entre las transformaciones a considerar se incluye:
- cualquier transformación del espacio de coordenadas de la ventana gráfica SVG a la ventana gráfica del documento, es decir, teniendo en cuenta las posiciones de todos los cuadros CSS desde el cuadro del elemento svg más externo hasta el bloque contenedor inicial cuando el fragmento del documento SVG está en línea en un documento HTML
Este idioma no está en la especificación SVG 1.1.
Este (el comportamiento de SVG2 que falta) es un error conocido en Firefox. Puede ver el informe de error aquí .
En cuanto a una solución alternativa, no creo que haya una respuesta fácil. AFAIK no hay equivalente de getScreenCTM() para elementos HTML. Puede leer la propiedad de transform del elemento contenedor, analizarla y luego multiplicarla con la matriz que obtiene de getScreenCTM() . Pero probablemente también deba tener en cuenta los desplazamientos de página del contenedor y todos sus ancestros.