<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox='0 0 640 480' version='1.1' height='480' width='640' xmlns='http://www.w3.org/2000/svg' 
    onmouseout='init()'
    onmousedown='mouseDown(evt)'
    onmousemove='mouseMove(evt)'
    onmouseup='mouseUp()'
>

<script type="text/ecmascript">
<![CDATA[
var element = null;
var ix = 0;
var iy = 0;
var ex = 0;
var ey = 0;

function init() {
    //element = null;
}

function mouseDown(event) {
    element = event.target;
    ix = event.clientX;
    iy = event.clientY;
    ex = element.x.baseVal.value;
    ey = element.y.baseVal.value;
    //.baseVal.value
    //alert(ex)
}

function mouseMove(event) {
    if ((element != null) && (event.button == 0)) {
        var dx = event.clientX - ix;
        var dy = event.clientY - iy;
        var tx = ex + dx;
        var ty = ey + dy;
        //element = event.target;
        
        // element.setAttribute('transform', 'translate(' + tx + ', ' + ty + ')');
        element.setAttribute('x', tx);
        element.setAttribute('y', ty);
    }
}

function mouseUp() {
    element = null;
}

]]>
</script>


<g x='200' y='0' id='3' height='30' fill='#cccccc' width='100'><rect stroke-width='2' stroke='#000000' rx='10' height='30' fill='#ccffff' width='100'/><text font-size='12' fill='#000000'>from</text></g>

</svg>
