如何动画线追踪移动的CSS元素？(How to animate a line to track a

更新- 我已经要求帮助使用SVG动画插件，它现在有一个解决方案（请点击此链接），从而有效地回答了这个问题，在这个固定我的第一次尝试。 虽然ATTR（）作为Jleagle也指出了可能导致解决方案

我有动画使用jQuery CSS元件的阵列，以及下一阶段是要跟踪的每个元件具有图形直线 。该线的一端应保持固定并与所述元件中的一个移动。

我以为我可以与SVG及相应的SVG jQuery插件做到这一点，但我碰到的我不知道是否我应该只是从不同的方向接近这么多的问题。

下面是代号为动画框有三个SVG线，所以你可以看到我在获得。 也有网站的JS提琴

使用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>

你可以把文本，并在同一标签的元素和文本样式的位置。
那么你就需要解决两个物体的动画。
希望这是确定。