Raphael does not drag path properly in IE9 and above versions of IE

Raphael uses path to modify the location of the arrow, which is normal in IE8, but cannot be moved in IE9 or above. Open f12 to see that the location property has been modified, but there is no move on the view

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div onclick="change()">dianwo </div>
    <div id="paper"></div>
    <script src="../js/raphael-min.js"></script>
    <script>
        var paper = new Raphael(document.getElementById("paper"), (window.screen.width - 350), 500);
        var path = paper.path("M  " + 20 + " " + 20 + " L " + 80 + " " + 80 + "").attr({
            "stroke": "-sharp000",
            "fill": "-sharp000",
            "stroke-width": 2,
            "arrow-end": "classic-wide-long"
        });

        function change() {
            path.attr({
               "path": "M  " + 50 + " " + 20 + " L " + 110 + " " + 80 + ""
            });
        }
    </script>
</body>

</html>