I feel like I'm close

public/assets/images/pointer-events-test.svg

@@ -2,7 +2,8 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   viewBox="-10 -10 120 120"
+   viewBox="-5 -10 110 120"
+   width="100%"
    version="1.1"
    id="svg1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -29,9 +30,18 @@
     }
     circle {
       stroke: black;
-      fill: teal;
       stroke-width: 0.25px;
     }
+    g circle {
+      fill: crimson;
+    }
+    /*g:hover circle {*/
+    /*  transform: scale(3);*/
+    /*}*/
+    g#out circle {
+      fill: orange;
+      /*transform: scale(3);*/
+    }
   </style>
   <g
      id="use2"
@@ -1533,15 +1543,79 @@
        cy="0"
        r="2.5" />
   </g>
-  <script>
+  <g id="out"/>
-  document.querySelectorAll('g').forEach(g => {
+  <script>//<![CDATA[
+  const svg = document.querySelector('svg');
+  const out = document.querySelector('#out');
+  const store = new Map();
+
+  //svg.addEventListener('pointerout', e => {
+  //  if (e.target !== svg)
+  //    console.log('SVG pointerout', 'from', e.target?.parentElement, 'to', e.relatedTarget?.parentElement);
+  //});
+
+  //const tiles = svg.querySelector('
+
+  svg.addEventListener('pointerover', e => {
+    console.log('SVG pointerover', e.target.closest('g'));
+    const g = e.target.closest('g:not(#out)');
+
+    if (g && g.querySelector('circle')) {
+      out.setAttributeNS(null, 'transform', g.getAttributeNS(null, 'transform'));
       const circle = g.querySelector('circle');
-    g.addEventListener('pointerover', e => {
+      store.set(circle, g);
-      circle.setAttributeNS(null, 'transform', 'scale(3)');
+      out.append(circle);
+    }
+    //if (e.target.tagName === 'use') {
+    //  out.setAttributeNS(null, 'transform', e.target.getAttribute
+    //}
   });
-    g.addEventListener('pointerleave', e => {
+
-      circle.removeAttributeNS(null, 'transform');
+  svg.addEventListener('pointerout', e => {
+    console.log('pointer out target', e.target);
+    const g = e.target.closest('g');
+    if (g) {
+      if (g.id === 'out') {
+        console.log('SVG pointerout OUT', store.get(e.target));
+        [...out.children].forEach(child => {
+          store.get(child).append(child);
+          store.delete(child);
         });
-  })
+      } else {
+        console.log('SVG pointerout', e.target.closest('g'));
+        [...out.children].forEach(child => {
+          console.log('child', child, 'belongs to', store.get(child));
+          console.log('relatedTarget', e.relatedTarget);
+          if (store.get(child) !== g || !e.relatedTarget) {
+            console.log('returning to', store.get(child));
+            store.get(child).append(child);
+            store.delete(child);
+          }
+        });
+      }
+    } else {
+      console.log('SVG pointerout', e.target);
+      [...out.children].forEach(child => {
+        store.get(child).append(child);
+        store.delete(child);
+      });
+    }
+  });
+
+  //document.querySelectorAll('g:not(#out)').forEach(g => {
+  //  const circle = g.querySelector('circle');
+  //
+  //  g.addEventListener('pointerover', e => {
+  //    console.log('pointer  over', g.id);
+  //    svg.append(g);
+  //    circle.setAttributeNS(null, 'transform', 'scale(3)');
+  //  });
+  //
+  //  g.addEventListener('pointerleave', e => {
+  //    console.log('pointer leave', g.id);
+  //    circle.removeAttributeNS(null, 'transform');
+  //  });
+  //})
+  //]]>
   </script>
 </svg>