設置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。