<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">

<style type="text/css">
.frontnine {    stroke-width:2;    stroke: red;}
.style1, .style2, .style3 {    stroke: black;    stroke-width: 3;    fill: none;}
.style3 {    fill: green;    opacity: .3;    stroke: none;}
</style>

<g id='graph' transform='translate(2 2)'>
    <rect id='grect' class='style1' width='350' height='100' />
    <line id='bar0' class='frontnine' x1='5' y1='100' x2='5' y2='25' x3='40'/>
    <rect id='distt' class='style3' x='206' y='62' width='128' height='25' onclick="distribute();"/>
</g>

<script type="text/ecmascript"><![CDATA[

    function wait(ms)
    {
        var now = new Date();
        var change = now;

        while( (change - now) < ms) change = new Date();
    }

    function distribute()
    {
        var speed = 1000;

        var element = document.getElementById('bar0');
        xold = parseFloat(element.getAttributeNS(null, 'x1'));
        xnew = parseFloat(element.getAttributeNS(null, 'x3'));

        element.setAttributeNS(null, 'x3', xold);

        spacing = parseFloat((xold - xnew)/speed);

        for(j = 0; j < speed; j++)
        {
            element.setAttributeNS(null, 'x1', xold-=spacing);
            element.setAttributeNS(null, 'x2', xold);
            wait(2000/speed);    //wait 2 seconds total over 'speed' number of iterations
//            alert('');    //try uncommenting this and see how the behaviour changes   
        }

        element.setAttributeNS(null, 'x1', xnew);
        element.setAttributeNS(null, 'x2', xnew);
    }

]]></script>

</svg>