El error de Firefox en cuestión es https://bugzilla.mozilla.org/show_bug.cgi?id=1610093
Es un problema de larga data por el cual el método getScreenCTM de un elemento SVG devuelve valores incorrectos cuando se aplica una transformación a un padre sobre el elemento SVG raíz.
El siguiente fragmento debe mostrar el círculo negro directamente debajo del puntero del mouse dentro del cuadro rojo. Esto funciona correctamente en webkit/blink donde la transform css en el padre se calcula correctamente. En Firefox, este error hace que el círculo negro se compense con los mismos valores que la transform css en el elemento div principal.
He evitado el problema hasta ahora asegurándome de que no haya transformaciones más arriba en el árbol dom, pero ahora estoy desarrollando esto como un componente en el que no tendré control sobre el dom padre.
¿Alguien sabe una solución fácil para obtener una matriz de transformación correcta?
const svgEl = document.querySelector(`svg#test-1`); const circleEl = document.querySelector(`svg#test-1 circle`); const handleMouseMove = (e) => { // transform screen to SVG coordinate space const mousePoint = svgEl.createSVGPoint(); mousePoint.x = e.clientX; mousePoint.y = e.clientY; const mouseCoordsInCanvasSpace = mousePoint.matrixTransform(svgEl.getScreenCTM().inverse()) // set circle to coords, should be mouse center in SVG coord space circleEl.setAttributeNS(null, 'cx', mouseCoordsInCanvasSpace.x); circleEl.setAttributeNS(null, 'cy', mouseCoordsInCanvasSpace.y); } window.addEventListener('mousemove', handleMouseMove); body{ padding: 0px; margin: 0px; } svg { border: 2px solid red; margin-left: 0px; } <!DOCTYPE html> <html> <body> <div style="transform: translate(50px, 50px);"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" id="test-1"> <circle r="10" /> </svg> </div> </body> </html>¡Ese es un error molesto! Mi sugerencia es usar un elemento <object> . La fuente/datos para el objeto debe ser el SVG.
En el siguiente ejemplo, estoy usando una URL de datos como fuente de datos para el <object> , para que al menos podamos ver algo aquí en ST. Pero imagino que el SVG debería ser dinámico de alguna manera. Entonces, para que esto funcione, deberá cargar el SVG como fuente de un archivo ( data="/file.svg" ). Si hace eso, tiene acceso a la propiedad contentDocument en <object> y de esa manera tiene acceso directo al DOM del SVG desde el "exterior". Debe ejecutarse desde un servidor web y también en el mismo dominio.
body{ padding: 0px; margin: 0px; } object { border: 2px solid red; margin-left: 0px; } <div style="transform: translate(50px, 50px);"> <object width="100" height="100" type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgaWQ9InRlc3QtMSI+="></object> </div> Aquí está el SVG que uso en el <object> :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> <script type="text/javascript"> <![CDATA[ var circleEl; const handleMouseMove = e => { const mousePoint = new DOMPoint(e.clientX, e.clientY); const mouseCoordsInCanvasSpace = mousePoint.matrixTransform(e.target.getScreenCTM().inverse()); circleEl.setAttributeNS(null, 'cx', mouseCoordsInCanvasSpace.x); circleEl.setAttributeNS(null, 'cy', mouseCoordsInCanvasSpace.y); }; document.addEventListener('DOMContentLoaded', e => { circleEl = document.getElementById('c1'); document.addEventListener('mousemove', handleMouseMove); }); ]]> </script> <circle id="c1" r="10" /> </svg>