Question

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

我的SVG名称是＆＃34; main＆＃34;，如何设置弹跳区域，以便当图像到达侧面时它不会从该区域移出？

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

首先，你不应该有两个事件decalaration，但只保留一个，最安全的是DOM ready事件，所以这个：

$(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，则使用自己的库。

设置SVG边界

1 个答案: