46 lines
1.4 KiB
HTML
46 lines
1.4 KiB
HTML
<html xmlns='http://www.w3.org/1999/xhtml'>
|
|
<body style="margin: 0px; padding: 0px">
|
|
<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>
|
|
</svg>
|
|
<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>
|
|
</body>
|
|
</html>
|