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

wzhonggo · 2019-01-04T09:27:37Z

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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

wzhonggo commented Jan 4, 2019

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

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

Comments

wzhonggo commented Jan 4, 2019