title: Why is Chrome not responding to mouse events on svg text with negative locations?
body: <p>I've got two text boxes on an svg.  One is at location x = 60, y = -80 and the mouseover event works fine in Chrome, Firefox and Edge.  The other is at location x = -120, y = -80 the mouseover event works fine in Firefox and Edge, but not in Chrome (version 95.0.46.3869).  Does anyone know why Chrome is behaving like this, and if there is a workaround so that these mouse events fire on svg elements with negative x co-ordinates?</p>
  <p>The simplest code that shows the problem follows: I think the background rectangle should turn green when the cursor is placed on either text box, and this does happen in Firefox and Edge, but this only works for the right-hand text box in Chrome.  This is causing me a real headache, I would really appreciate some help.</p>
  <p>jsfiddle at: <a href="https://jsfiddle.net/sbco4zmd/" rel="nofollow noreferrer">https://jsfiddle.net/sbco4zmd/</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;divMain&quot; id=&quot;mainDiv&quot;&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;
               xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
               id=&quot;svgRoot&quot; overflow=&quot;hidden&quot;
               width=&quot;400px&quot; height=&quot;400px&quot;
               viewBox=&quot;-200 -200 400 400&quot;&gt;
              &lt;rect id=&quot;mainRect&quot; x=&quot;-200&quot; y=&quot;-200&quot; height=&quot;400px&quot; width=&quot;400px&quot; pointer-events=&quot;none&quot; fill=&quot;lightblue&quot; opacity=0.5&gt;&lt;/rect&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;script&gt;
          window.onload = function () {
              let svg = document.getElementById(&quot;svgRoot&quot;);
              let rect = document.getElementById(&quot;mainRect&quot;);
  
              var localMouseOverEvent = function () {
                  rect.style.fill = &quot;lightgreen&quot;;
              };
              var localMouseOutEvent = function () {
                  rect.style.fill = &quot;lightblue&quot;;
              }
  
              let makeTextBox = function (x, y, text) {
                  var textBox = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;text&quot;);
                  textBox.setAttributeNS(null, 'x', x);
                  textBox.setAttributeNS(null, 'y', y);
                  textBox.style = &quot;font-size: 40px&quot;;
                  textBox.textContent = text;
                  textBox.addEventListener(&quot;mouseover&quot;, localMouseOverEvent, false);
                  textBox.addEventListener(&quot;mouseout&quot;, localMouseOutEvent, false);
                  svg.appendChild(textBox);
              }
  
              makeTextBox(-120, -80, &quot;Fails&quot;);
              makeTextBox(60, -80, &quot;Works&quot;);
          };
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>