SVG use tag can not fire vmouseover event on IE and Edge

SVG g tag can fire vmouseover event on all browses. SVG use tag can fire vmouseover event on Chrome and FF, but not on IE and Edge. It also can fire mouseover event on all browses .

Test html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>svg use tag test</title>
    <script>
        $(document).ready(function () {
            $("#rootshape_1").on("vmouseover",
                function () {
                    $("#content").append("svg use tag vmouseover")

                });

            $("#rootshape_1").on("mouseover",
                function () {
                    $("#content").append("mouseover")

                });

            $("#rootshape_2_g").on("vmouseover",
                function () {
                    $("#content").append("svg g tag vmouseover")

                });
        })
    </script>
</head>
<body style="pointer-events: none;">
<div style="visibility: inherit; width: 154px; height: 74px; top: 248px; left: 48px; display: block;pointer-events: none;">
    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg"
         contentscripttype="text/ecmascript" display="block" width="100%" zoomAndPan="magnify"
         contentstyletype="text/css" height="100%" preserveAspectRatio="none" version="1.0" id="rootshape_1_svg">

        <defs>
            <g id="rootshape_1_g" xmlns="http://www.w3.org/2000/svg">
                <rect rx="5" width="149" ry="5" x="0" height="69" y="0"></rect>
            </g>
        </defs>
        <use xlink:href="#rootshape_1_g" xlink:type="simple" xlink:actuate="onLoad" id="rootshape_1" xlink:show="embed"
             style=" fill: #666666;  cursor: pointer; pointer-events: painted;"
             transform="translate(2,2)"></use>
    </svg>
</div>
<div style="visibility: inherit; width: 154px; height: 74px; top: 248px; left: 48px; display: block; pointer-events: none;margin-top: 50px;">
    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg"
         contentscripttype="text/ecmascript" display="block" width="100%" zoomAndPan="magnify"
         contentstyletype="text/css" height="100%" preserveAspectRatio="none" version="1.0" id="rootshape_1_svg">
        <g id="rootshape_2_g" xmlns="http://www.w3.org/2000/svg" style="pointer-events: painted">
            <rect rx="5" width="149" ry="5" x="0" height="69" y="0"></rect>
        </g>
    </svg>
</div>
<div id="content" style="margin-top: 20px; width: 100%; height: 100%"></div>
</body>
</html>

jquery-archive / jquery-mobile

SVG use tag can not fire vmouseover event on IE and Edge #8641