<html>
<script>
var dx, dy;
var x, y;
var actived = null;
function mouseDownListener(e){
if(actived.setCapture){
actived.setCapture();
}
else{
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
var canvas = document.getElementById('objCanvas');
canvas.addEventListener("mousemove", mouseMoveListener, false);
canvas.addEventListener("mouseup", mouseUpListener, false);
x = e.offsetX, y = e.offsetY;
dx = x-parseInt(actived.getAttribute('cx'), );
dy = y-parseInt(actived.getAttribute('cy'), );
console.log('('+x+','+y+'), ('+dx+','+dy+')');
//console.log('mouse down | X,Y: ('+e.x+', '+e.y+') | client X,Y: (' + e.clientX + ', ' + e.clientY + ') offset X,Y: (' + e.offsetX + ', ' + e.offsetY + ')');
//e.cancelBubble = true;
}
function mouseMoveListener(e){
//actived.setAttribute("transform", "translate("+dx+", "+dy+")");
actived.setAttribute("cx", e.offsetX-dx);
actived.setAttribute("cy", e.offsetY-dy);
//console.log('mouse moving: ('+e.clientX+', '+e.clientY+')('+e.x+', '+dy+')');
}
function mouseUpListener(e){
dragging = false;
console.log('mouse up');
if(actived.releaseCapture){
actived.releaseCapture();
}
else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//actived.setAttribute('cx', x);
//actived.setAttribute('cy', y);
//actived.setAttribute('transform', 'translate(0, 0)');
var canvas = document.getElementById('objCanvas');
canvas.removeEventListener('mousemove', mouseMoveListener);
canvas.removeEventListener('mouseup', mouseUpListener);
//canvas.onmousemove = null;
//canvas.onmouseup = null;
}
document.onreadystatechange = function(e){
if(document.readyState=='complete'){
actived = document.getElementById('objCircle');
//actived.onmousedown = mouseDownListener;
actived.addEventListener("mousedown", mouseDownListener, false);
}
}
</script>
<body>
<svg id="objCanvas" width="640" height="480" style="background-color:#eee" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle id="objCircle" cx="100" cy="100" r="5" stroke="green"
stroke-width="2" fill="white"/>
</svg>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)