Tengo dos cuadros de texto en un svg. Uno está en la ubicación x = 60, y = -80 y el evento mouseover funciona bien en Chrome, Firefox y Edge. El otro está en la ubicación x = -120, y = -80, el evento mouseover funciona bien en Firefox y Edge, pero no en Chrome (versión 95.0.46.3869). ¿Alguien sabe por qué Chrome se comporta de esta manera, y si hay una solución para que estos eventos del mouse se activen en elementos svg con coordenadas x negativas?
El código más simple que muestra el problema es el siguiente: creo que el rectángulo de fondo debería volverse verde cuando el cursor se coloca en cualquiera de los cuadros de texto, y esto sucede en Firefox y Edge, pero esto solo funciona para el cuadro de texto de la derecha en Chrome. Esto me está causando un verdadero dolor de cabeza, realmente agradecería alguna ayuda.
jsfiddle en: https://jsfiddle.net/sbco4zmd/
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div class="divMain" id="mainDiv"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot" overflow="hidden" width="400px" height="400px" viewBox="-200 -200 400 400"> <rect id="mainRect" x="-200" y="-200" height="400px" width="400px" pointer-events="none" fill="lightblue" opacity=0.5></rect> </svg> </div> <script> window.onload = function () { let svg = document.getElementById("svgRoot"); let rect = document.getElementById("mainRect"); var localMouseOverEvent = function () { rect.style.fill = "lightgreen"; }; var localMouseOutEvent = function () { rect.style.fill = "lightblue"; } let makeTextBox = function (x, y, text) { var textBox = document.createElementNS("http://www.w3.org/2000/svg", "text"); textBox.setAttributeNS(null, 'x', x); textBox.setAttributeNS(null, 'y', y); textBox.style = "font-size: 40px"; textBox.textContent = text; textBox.addEventListener("mouseover", localMouseOverEvent, false); textBox.addEventListener("mouseout", localMouseOutEvent, false); svg.appendChild(textBox); } makeTextBox(-120, -80, "Fails"); makeTextBox(60, -80, "Works"); }; </script> </body> </html>