JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" />
</svg>

<pre></pre>

CSS

pre {
    background: #ddd;
    border: 1px solid #ccc;
    height: 400px;
    overflow-y: scroll;
    padding: 10px 20px;
}

JavaScript

$('svg').on('mousemove', function(evt)
{
    var root = $('svg')[0];
    var rpos = root.createSVGRect();
    rpos.x = evt.clientX;
    rpos.y = evt.clientY;
    rpos.width = rpos.height = 1;
    var list = root.getIntersectionList(rpos, null);
    
    for(var i = 0; i < list.length; i++)
    {
        if(list[i] != evt.target)
        {
            $(list[i]).mousemove();
        }
    }
});
$('rect').on('mousemove', function(evt)
{
    log(this.id);
});
function log(msg)
{
    $('pre').html(msg + '<br />' + $('pre').html());
    console.log(msg);
}