设置SVG边界

Question

可我知道我可以衡量我的SVG尺寸的宽度和长度？从那里，我想限制和限制所有图像元素只能在SVG内移动。

我的SVG的名字是“主”，如何设置弹跳区域，这样的图像时，到达侧它不会从该地区移出？

目前，如果我设置更多的图像出现在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 ******************** --> 

EDITED ::

我试图把在这3次检查，但不知何故，它不工作，检查......

function outOfBounds(point, boundary) { 
    return point.y > boundary.top 
    || point.y < boundary.bottom + 200 
    || point.x < boundary.getLeftBoundAt(point.y)+500 
    || point.x > boundary.getRightBoundAt(point.y)+500; 
} 

function getLeftBoundAt(y) { 
    return this.slope * y + this.base + 300; 
} 

function getTopBoundAt(x) { 
    var segment = this.topSegmentAt(x); 
    return segment.origin.y + segment.slope * (x - segment.origin.x); 
} 

Answer 1

首先，你应该没有两个事件错误，但只保留一个，最安全的是DOM准备事件，所以fom：

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

使用这种

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

，或者，如果你想在最短的版本，你可以简单地使用所有的

$(function(e) { 
} 

---

其次，你提到的SVG动画，但我只能看在你的代码是简单的CSS动画...

为了您的信息，这是一个CSS动画，以及：http://themble.com/bones

---

现在，关于你的界限，通常我们设置宽度和当前网页的高度，但是这始终是从开发人员知道他从动画想要什么，有时候我们可以简单地想要一个带-a般的大小...

假设你有：

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

您设置绘图区为：

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

注意，我使用拉斐尔这里只是为了演示的目的，你可以使用你自己的图书馆，如果不使用RaphaelJs。