Jquery 如何为SVG制作边界墙，使动画图像不会'；你不能离开SVG吗？

我想在这里做的是，我添加一个小图像，它会在身体周围移动。。但问题是，我希望小图像在svg框中向上移动。。我尝试获取SVG ID并让它附加图像。。它仍将移出svg框。。我想知道我是否漏掉了一些密码

$(window).load(function(){
$(document).ready(function(e) {
var num = 0;
var interval;

/*var svg = d3.select("main").append("svg:svg")
.attr("width", w)
.attr("height", h);
*/



$('#add').click(function(e) {
$('#box').append('<div class="predator" id="predator'+ num + '"><img src="Pictures/PondSpecies/anchovies.png"></div>');
$('#predator'+num).css({
left: randomRange(500,150),
top: randomRange(400,150)
});

if (interval)
clearInterval(interval);
interval = setInterval (function () {

for (var i=0; i<num; i++) {
$('#predator'+i).animate ({
left: '+=' + randomRange(-11,11),
top: '+=' + randomRange(-11,11)


s /* Extra */
//if (x < 0 || x > w) SVG.vx *= -1;
//if (y < 0 || y > h) SVG.vy *= -1;



}, 100);
}
}, 100);
num++;
});


$('#remove').click(function(e) {
num--;

$('#predator' + num).remove();

if (num == 0 && interval)
clearInterval(interval);
});
});


/* FUNCTIONS */
function randomRange(min, max) {
return Math.random() * (max-min) + min;
}
});

$（窗口）.load（函数（）{
$（文档）.ready（函数（e）{
var num=0；
var区间；
/*var svg=d3.select（“main”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
*/
$（'#添加'）。单击（函数（e）{
$（“#框”）。追加（“”）；
$（'#捕食者'+num）.css({
左：随机范围（500150），
顶部：随机范围（400150）
});
如果（间隔）
间隔时间；
间隔=设置间隔（函数（）{
对于（var i=0；i w）SVG.vx*=-1；
//如果（y<0 | | y>h）SVG.vy*=-1；
}, 100);
}
}, 100);
num++；
});
$（“#删除”）。单击（函数（e）{
num--；
$（'#捕食者'+num）.remove（）；
if（num==0&&interval）
间隔时间；
});
});
/*功能*/
函数随机范围（最小值、最大值）{
返回Math.random（）*（max-min）+min；
}
});

HTML正文：

        <div id="box">
    <SVG xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" id="main" style="border:solid 1px #000000;width:515;height:474;">
        <image xlink:href="Pictures/PondEnvironment/pond.png" x="0" y="0" width="513" height="474" />
</SVG>
      </div>

---

非常感谢您的帮助

如果在设置动画时希望将捕食者放在SVG中，则每次都需要检查它们的新位置。这把小提琴应该有助于：

另外，我认为您的动画没有完全完成，这意味着它们开始排队，可能会造成一些混乱，所以为了确保，您应该在再次制作动画之前调用stop（）

所以需要这样的东西：

$('#add').click(function(e) {

        $('#box').append('<div class="predator" id="predator' + num + '"><img src="Pictures/PondSpecies/anchovies.png"></div>');
        $('#predator' + num).css({
            left: randomRange(500, 150),
            top: randomRange(400, 150)
        });

        var containerWidth = $("svg").width() - 25; // Minus the width of the img
        var containerHeight = $("svg").height() - 25; // Minus the width of the img

        if (interval) clearInterval(interval);
        interval = setInterval(function() {

            for (var i = 0; i < num; i++) {
                var randomLeft = randomRange(-11, 11);
                var randomTop = randomRange(-11, 11);

                var predator = $('#predator' + i);
                var predatorLeft = parseInt(predator.css("left"));
                var predatorTop = parseInt(predator.css("top"));


                if (predatorLeft + randomLeft <= 0) randomLeft = 11;
                if (predatorLeft + randomLeft >= containerWidth) randomLeft = -11;

                if (predatorTop + randomTop <= 0) randomTop = 11;
                if (predatorTop + randomTop >= containerHeight) randomTop = -11;

                predator.stop();
                predator.animate({
                    left: '+=' + randomLeft,
                    top: '+=' + randomTop
                }, 100);
            }
        }, 100);
        num++;
    });

$（'#添加'）。单击（函数（e）{
$（“#框”）。追加（“”）；
$（'#捕食者'+num）.css({
左：随机范围（500150），
顶部：随机范围（400150）
});
var containerWidth=$（“svg”）.width（）-25；//减去img的宽度
var containerHeight=$（“svg”）.height（）-25；//减去img的宽度
if（间隔）clearInterval（间隔）；
间隔=设置间隔（函数（）{
对于（变量i=0；i