How to animate a line to track a moving CSS elemen

UPDATE - I had asked for help fixing my first attempt at this using the SVG animate plugin which there is now a solution to (follow this link), which effectively answers this question. Though attr() as Jleagle pointed out could also lead to a solution

I have animated an array of css elements using jQuery, and the next stage is to track each element with a graphical straight line. One end of the line should remain fixed and one move with the element.

I thought I could accomplish this with SVG and the appropriate SVG jQuery plugin, but I've run into so many problems I wondered if I should just approach it from a different direction.

Below is the code for the animated boxes with three SVG lines so you can see what I'm getting at. There is also a JS fiddle of the site

Javascript

$(function() {
var balloons = [$("#box1"), $("#box2"), $("#box3")];

var lines = [$("#line1"), $("#line2"), $("#line3")];

function act(jqObj, speed, change) {

    jqObj.animate({
        'left' : change
    }, speed).animate({
        'left' : -change
    }, speed, function() {
        act(jqObj, speed, change);
    });

};
for( i = 0; i < balloons.length; i++) {
    var speed = 2000 + Math.random() * 501;
    var change = 10 + Math.random() * 26;

    act(balloons[i], speed, change);
}
});

HTML / CSS

<html>
<head>
    <title>Proof of Concept Page</title>
    <style type="text/css">
        .html .body {
            position: absolute;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: red;
        }
        #box1 {
            margin-left: 300px;
            margin-top: 60px
        }
        #box2 {
            margin-left: 500px;
            margin-top: 20px
        }
        #box3 {
            margin-left: 700px;
            margin-top: 50px
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>

</head>
<body>

    <div  class="box" id="box1">
        Proj 1
    </div>
    <div  class="box" id="box2">
        Proj 2
    </div>
    <div  class="box" id="box3">
        Proj 3
    </div>

    <svg id="linePad" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line id="line1" x1="350" y1="160" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
        <line id="line2" x1="550" y1="120" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
        <line id="line3" x1="750" y1="150" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>

</body>
</html>

You could put the text and the elements in the same tag and style the position of the text.
Then you don't need to fix the animation of two objects.
Hope this is OK.