<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" style="border: solid">
    <circle cx="350" cy="350" r="50" fill="green" onmousedown="startMove()"/>
    <text x="200" y="50" text-anchor="middle">The circle should be in the middle</text>
    <script>
        var root = document.getElementsByTagName("svg")[0];
        var circle = document.getElementsByTagName("circle")[0];
    
        function move(evt) {
            var matrix = root.getScreenCTM();
            var point = root.createSVGPoint();
            point.x = evt.clientX;
            point.y = evt.clientY;
            point = point.matrixTransform(matrix.inverse());
            circle.cx.baseVal.value = point.x;
            circle.cy.baseVal.value = point.y;
        }
    
        function startMove() {
            root.addEventListener("mousemove", move, false);
            root.addEventListener("mouseup", stopMove, false);
        }
    
        function stopMove() {
            root.removeEventListener("mousemove", move, false);
            root.removeEventListener("mouseup", stopMove, false);
    
            if (window.testRunner)
                testRunner.notifyDone();
        }
    
        if (window.testRunner)
            testRunner.waitUntilDone();
    
        if (window.eventSender) {
            eventSender.mouseMoveTo(350, 350);
            eventSender.mouseDown();
            eventSender.mouseMoveTo(200, 200);
            eventSender.mouseUp();
        }
    </script>
</svg>