Animation 设置SVG边界

我可以知道如何测量SVG尺寸的宽度和长度吗？从这里开始，我想限制所有图像元素仅在SVG中移动

我的SVG名称是“main”，如何设置反弹区域，使图像到达侧面时不会移出该区域

当前，如果我将更多图像设置为显示在SVG上，它将以某种方式移出SVG。有办法检查吗

      <!-- ******************** Animation ******************** -->  

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


        $('#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(-6,7),
                    top: '+=' + randomRange(-6,7)
            }, 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;
            }
            });  


        <!-- ******************** Animation ******************** --> 

$（窗口）。加载（函数（）{
$（文档）.ready（函数（e）{
var num=0；
var区间；
$（'#添加'）。单击（函数（e）{
$（“#框”）。追加（“”）；
$（'#捕食者'+num）.css({
左：随机范围（500150），
顶部：随机范围（400150）
});
如果（间隔）
间隔时间；
间隔=设置间隔（函数（）{
对于（var i=0；i首先，您不应该有两个事件标记，而应该只保留一个，最安全的是DOM就绪事件，因此：

$(window).load(function(){
    $(document).ready(function(e) {
    }
}

用这个

$(document).ready(function(e) {
}

或者，如果您想要最短的版本，您可以简单地使用

$(function(e) {
}


其次，您提到了SVG动画，但我只能在您的代码中看到简单的CSS动画

供您参考，这也是一个CSS动画：


现在，关于你的边界，通常我们设置为当前网页的宽度和高度，但这总是由开发人员来确切地知道他想要从动画中得到什么，有时我们可能只是想要一个条带大小

假设你有：

<div id="svg"></div>

注意，我在这里使用Raphael只是为了演示，如果不使用，您可以使用自己的库。
您确定您使用的是SVG动画吗？您提到的代码只是使用jQuery方法的CSS动画
.animate（）
…我可以知道没有Raphael.js或其他人有可能创建边界吗？纯js…有可能吗？什么的边界？你的CSS动画？在CSS动画中，你可以自己设置边界，或者简单地使用
溢出：隐藏；
这样它就不会显示想要的区域之外的任何内容。。。
<div id="svg"></div>

 svg = Raphael("svg", 
              $("#svg").width(), 
              $("#svg").height());