0

我可以知道如何测量我的 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 ******************** -->

编辑::

我试图进行这 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);
}
4

1 回答 1

1

首先，你不应该有两个事件声明，而只保留一个，最安全的是 DOM 就绪事件，所以如下：

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

用这个

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

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

$(function(e) {
}

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

供您参考，这也是一个 CSS 动画：http ://themble.com/bones

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

假设你有：

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

您将绘图区域设置为：

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

请注意，我在这里使用 Raphael 只是为了演示，如果不使用RaphaelJs ，您可以使用自己的库。

于 2012-05-27T08:59:12.417 回答