我已经做了一些探索，但是关于这个主题的文档似乎有点稀疏，而且一两件事没有加起来，
我试图让一条线来跟踪动画元素，我的设计是使用与线的 X1 坐标的框元素相同的动画变量，
Javascript(最新的 jQuery、SVG 插件 + SVG 动画插件)
$(function(){
var balloons = [
$("#box1"),
$("#box2"),
$("#box3")
];
var lines = [
$("#line1"),
$("#line2"),
$("#line3")
];
function act(jqObj, lineX, speed, change) {
jqObj
.animate({'left': change}, speed)
.animate({'left': -change}, speed);
lineX
.animate({svgX1: change}, speed)
.animate({sgvX1: -change}, speed, function() {
act(jqObj, lineX, speed, change);
});
};
for (i = 0; i < balloons.length; i++) {
var speed = 2000 + Math.random() * 501;
var change = 10 + Math.random() * 26;
act(balloons[i], lines[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="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svganim.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 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>
这里有几个问题，首先，一个明显的问题，即当前代码将 X1 的位置设置在最左边，因为我没有告诉要添加到原始值。
我没有使用 '+=change' 的原因是 '+=anything' 出于某种原因破坏了代码，甚至是通用数值。
最后，即使我只是将第一个 X1 动画的值设置为 500，将第二个设置为 0，也只有第一个会触发，第二个动画将被跳过。这种效果在这里也可以看到，线条飞到最左边然后不动。
我敢肯定这部分是我对 jQuery 和 Javascript 的非常业余的理解，但我将不胜感激任何建设性的帮助。
最佳答案
这相当具有挑战性，因为我以前没有使用过 svg。
在断断续续玩了几天之后，我得到了这个:
var $boxes = $(".box"),//coded in HTML
strings = [];//populated below with sgv lines
$('#canvas').svg({
onLoad: function(svg) {
var g = svg.group({
stroke: 'red',
strokeWidth: 2
});
$boxes.each(function(i, el) { // make one string per box.
strings.push(svg.line(g, parseInt($(el).css('left')), 18+parseInt($(el).css('top')), 50, 200));
});
}
});
//animate the boxes
$boxes.each(function(i, el) {
var speed = 2000 + Math.random() * 501,
change = 10 + Math.random() * 26,
jqObj = $(el),
initial_left = parseInt(jqObj.css('left')) || 0;
(function act() {
jqObj.animate({
'left': initial_left + change
}, {
duration: speed,
step: function() { //move the string's top end to keep up with the box
$(strings[i]).animate({
svgX1: jqObj.css('left')
}, 0);
}
}).animate({
'left': initial_left - change
}, {
duration: speed,
step: function() { //move the string's top end to keep up with the box
$(strings[i]).animate({
svgX1: jqObj.css('left')
}, 0);
},
complete: act
});
})();
});
参见 DEMO .
这实际上是一个带有 svg 字符串和非 svg 文本框的混合解决方案。这些元素以这样一种方式进行动画处理，即每个字符串看起来都附加到一个文本框。
代码不容易理解，毫无疑问可以简化。最后，我很高兴得到一些工作。对我来说是很好的教育，我希望它对你有用。
编辑 - 解释性说明:
您的解释:几乎正确。我实际上正在使用另一种形式的动画，其工作方式如下，.animate(properties, options)，其中属性和选项都是映射(javascript 对象)。这种形式的方法允许指定 step 选项 - 即。将在动画的每一步发生的操作。在这种情况下，感兴趣的操作是改变气球线顶端的位置。
i 和 'el':jQuery 的 .each() 方法提供了一种方便的方法来迭代数组中的元素， jQuery 容器中的 DOM 节点，或普通 js 对象的属性。 .each() 的两种形式都接受一个回调函数，该函数指定在每次 迭代时执行的操作。反过来，回调函数接受两个参数，分别表示(对于数组和 jQuery 容器)index 和 value，或(对于普通 js 对象)key和 值。 .each() 方法在内部调用回调函数并在每次迭代中插入一次参数。在写回调的时候，你可以随意调用参数，我称之为i(index的缩写)和el(index的缩写)元素)。
线条动画:线条实际上只是移动了一点点然后停下来。但是，此操作在 step 回调中执行，它在动画的每个步骤中调用一次 - 即。多次，直到动画完成。因此，线条与它“粘附”的对象保持一致。
关于jquery - 在一行中使用 jQuery SVG 动画插件的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10526137/