使用jQuery制作SVG对象的动画

我正在尝试使用jQuery设置svg对象的动画。 动画应该是这样的：

• 单击主对象->向上平移主对象
• 单击另一个对象->以另一种方式从实际位置开始平移主要对象

看看这个

主要对象是红色椭圆，通过单击它应用的平移效果很好，其他动画不起作用，我不知道为什么

谢谢大家!

试试这个：-

JS

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    // Try to animate!
    ellipse_red.animate({
        "min-height": -200
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + -top + "," + firstY + ")");
        }
    });
});

好的，我已经达到了目标：

---

我不确定这是否是最好的解决方案，但它是有效的：我只使用一个参数，并使用“转换参数”计算每个轴上的移动，在这种情况下，y轴的两个增量增量和x轴的1之间的除法。

据我所知，您会得到一个错误，因为您的第二个函数使用DOM对象本身，不是jQuery对象，请使用$（'#ellipseRed'）.css（）而不是$（'#ellipseRed'）[0]。由于使用了

.getAttribute（）

和

.setAttribute（）

方法，我使用了DOM对象。不管怎么说，jquery对象和

attr（）

方法仍然不起作用，我不知道你想要什么样的效果-但问题在于你使用的动画逻辑，我对你的小提琴做了一些修改，正如你所看到的，它起作用了。可能你没有保存你的修改…代码是一样的。效果很简单：点击蓝色椭圆，红色椭圆应该移动到页面的右上角，从此时的位置移动，而不是从加载页面时椭圆的位置。对不起，你是对的，这里是：你真的很接近，但当点击蓝色时，红色椭圆只是向右移动…似乎垂直移动是忽略的，最后一件事：是否可以将红色椭圆从它到达的最后一个位置移动？如果你看到最后一个阿克塞尔。米歇尔的小提琴，椭圆到达了正确的最终位置，但它是从原来的起点开始的。在你的小提琴中，椭圆正确移动，但我在相同的位置开始和结束。希望你能理解，我的英语不好，我很难解释自己。现在我们真的很接近了！！！最终效果应该与此非常相似，但流体运动甚至在y轴上。非常感谢您对我的帮助：）@MaxMarkson请接受您问题的正确答案。您的回答让我走上了正确的道路，但它并不完全正确。正确的是我的，但我不能在2天内接受，所以我必须等待。

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

    // Try to animate!
    ellipse_red.animate({
        "min-height": -200
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + -top + "," + firstY + ")");
        }
    });
});

$('#ellipseRed').click(function () {
    $(this)
        .css({
        "min-height": 0
    })
        .animate({
        "min-height": -150
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(0," + top + ")");
        }
    });
});

$('#ellipseBlue').click(function () {
    // Get the value of the transform attribute
    var ellipse_red = $('#ellipseRed');
    var xforms = ellipse_red.attr('transform');
    var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX, firstY;
    // If the transform attribute doesn't exist then add it.
    if (parts == null) {
        ellipse_red.attr('transform', 'translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    // Otherwise take the values read.
    else {
        firstX = parseInt(parts[1]);
        firstY = parseInt(parts[2]);
    }
    // Set the arrive point
    var animation = {};
    var delta = {};
    delta.x = 20;
    delta.y = -50;
    animation.x = firstX + delta.x;
    animation.y = firstY + delta.y;

    // Try to animate!
    ellipse_red.animate({
        "increment": animation.x,
    }, {
        duration: 1000,
        step: function (top) {
            this.setAttribute("transform", "translate(" + top + "," + (top*(delta.y/delta.x)) + ")");
        }
    });
});