Detect element hover

HTML

<div id="test"></div>
<svg version="1.1" id="Shapes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 368 373" style="enable-background:new 0 0 368 373;" xml:space="preserve">
<style type="text/css">
	.st0{stroke:#FFFFFF;stroke-miterlimit:10;}
	.st1{fill:#4BB749;stroke:#1F451F;stroke-miterlimit:10;}
	.st2{fill:#CB3694;stroke:#FFFFFF;stroke-miterlimit:10;}
	.st3{fill:url(#Gradient_Star_1_);stroke:#FFFFFF;stroke-miterlimit:10;}
	.st4{fill:url(#Gradient_Poly_Large_1_);stroke:#FFFFFF;stroke-miterlimit:10;}
	.st5{fill:url(#Gradient_Poly_Small_1_);stroke:#FFFFFF;stroke-miterlimit:10;}
</style>
<ellipse id="Ellipse_2" class="st0" cx="261" cy="212" rx="94" ry="79"/>
<g id="Bright_Shapes">
	<rect id="Green_Square" x="98" y="161.22" class="st1" width="184" height="174.5"/>
	<ellipse id="Pink_Ellipse" class="st2" cx="115.59" cy="268.59" rx="94" ry="79"/>
	<g id="Gradient_Shapes">
		<radialGradient id="Gradient_Star_1_" cx="115.5932" cy="189.5899" r="147.9309" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="1" style="stop-color:#1C75BC"/>
		</radialGradient>
		<polygon id="Gradient_Star" class="st3" points="109.37,335.15 68.3,238.41 -34.67,217.41 44.63,148.46 32.79,44.03 122.87,98.15 
			218.53,54.61 194.9,157.01 265.86,234.53 161.17,243.7 		"/>
		<radialGradient id="Gradient_Poly_Large_1_" cx="167" cy="171" r="88.1134" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="1" style="stop-color:#1C75BC"/>
		</radialGradient>
		<polygon id="Gradient_Poly_Large" class="st4" points="234,233 146.81,260.02 79.81,198.02 100,109 187.19,81.98 254.19,143.98 		
			"/>
		<radialGradient id="Gradient_Poly_Small_1_" cx="209.5932" cy="248.4668" r="30.3834" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#FFFFFF"/>
			<stop  offset="1" style="stop-color:#1C75BC"/>
		</radialGradient>
		<polygon...

CSS

#test{
    height: 4em;
    color:#f00;
}

JavaScript

(function() {
    const svg = document.querySelector('#Shapes'),
          output = document.querySelector('#test');

    function printElement(elm) {
        var id = elm.id ? ' id="' + elm.id + '"' : "";
        return "<" + elm.tagName.toLowerCase() + id + ">";
    }

    function hitTest(e) {
        const x = e.clientX,
              y = e.clientY,
              elms = [];

        let elm;
        while(true) {
            elm = document.elementFromPoint(x, y);
            if(!svg.contains(elm)) {
                break;
            }

            elms.push(elm);
            //Hide the element from the next round of `elementFromPoint()`:
            elm.style.pointerEvents = 'none';
        }

        output.textContent = elms.map(printElement).join(' ');

        //Cleanup:
        elms.forEach(elm => elm.style.pointerEvents = '');
    }

    svg.addEventListener('mousemove', hitTest);
    svg.addEventListener('touchmove', hitTest);
})();