title: How can I get elementFromPoint() to return an SVG g element?
body: <p>I'm using <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint" rel="nofollow noreferrer">document.elementFromPoint()</a> to pick out <code>g</code> elements from a complex SVG over which I have control. I want a specific <code>g</code> element that has many children nested within it, and in order to obtain that <code>g</code> element I'm setting <code>pointer-events: none</code> on the child elements. I expect <code>elementFromPoint</code> to return the nearest parent with standard values for <code>pointer-events</code> because that's now <code>elementFromPoint</code> seems to work in HTML.</p>
  <p>Here's an sample that demonstrates the way in which SVG seems to work differently that HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// The point at the center of #html-child
  // Returns the #html-parent element, as I expect. GOOD!
  console.log(document.elementFromPoint(100, 100).id);
  
  // The point at the center of #svg-child
  // I expect it return the #svg-parent element.
  // Instaed it returns the &lt;svg/&gt; element. FRUSTRATING!
  console.log(document.elementFromPoint(100, 300).id);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin: 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- A 200px x 200px square with html --&gt;
  &lt;div id=html-parent&gt;
    &lt;div id=html-child
      style='width: 200px; height: 200px;
        background: black;
        pointer-events: none'
    &gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- A 200px x 200px circle with svg --&gt;
  &lt;svg viewBox='-100 -100 200 200' width=200 height=200 id="svg-container"&gt;
    &lt;g id=svg-parent&gt;
      &lt;circle id=svg-child x=0 y=0 r=100 pointer-events=none /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm aware that I can remove <code>pointer-events: none</code> and then traverse the DOM to find my <code>g</code> element. But for performance reasons I'd like to avoid that approach because this code runs within a 'touchmove' event listener that fires very frequently. I'd also like to understand why the SVG behaves differently than the HTML.</p>
  <p><strong>How can I get <code>elementFromPoint</code> to return the <code>#svg-parent</code> element?</strong></p>