No meu código JavaScript, utilizando o rato movo um rectangulo SVG de um lado para o outro. O meu problema é que quando clico no objeto, a posição do rato não fica fixa no meio objeto mas sim no canto superior direito e bem fora do objeto. Como posso posicionar o rato no meio do objeto?
Meu código HTML:
<div id="divrect" onmousedown="start_drag(document.getElementById('divrect'), event);" style="position:absolute;" style="height:0px;">
<svg width="150" height="150">
<rect id="rect" x="5" y="25" width="150" height="150" stroke="#0E0E0E" style="fill:red; stroke-width:1" />
<text id =txtrect x="5" y="35" font-family="Verdana" font-size="11" fill="white" >
Rect1
</text>
</svg>
</div>
E meu código JavaScript:
function start_drag(objet,event)
{
dragged = objet;
if( event.preventDefault ) event.preventDefault();
}
function drag_onmousemove(event)
{
if( dragged )
{
x = event.clientX;
y = event.clientY;
dragged.style.position = 'absolute';
dragged.style.left = x + 'px';
dragged.style.top = y + 'px';
}