Анимация SVG-объекта с помощью jQuery

Question

Я пытаюсь анимировать объект SVG с помощью JQuery. Анимация должна быть примерно такой:

• нажмите на первичный объект -> перевести первичный объект вверх.
• нажмите на другой объект -> перевести основной объект по-другому, начиная с фактической позиции.

Посмотрите на это http://jsfiddle.net/MaxMarkson/khZqW/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() {
    // Getting
    var xforms = $('#ellipseRed')[0].getAttribute('transform');
    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
    var firstX,firstY;
    if(parts == null){
        $('#ellipseRed')[0].setAttribute('transform','translate(0,0)');
        firstX = 0;
        firstY = 0;
    }
    else{
        firstX = parts[1];
        firstY = parts[2];
    }
    // Setting
    //
    var animation = {};
    animation.x = firstX + 200;
    animation.y = firstY - 100;

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

Первичный объект - красный эллипс, перевод, примененный нажатием на него, работает нормально, другая анимация не работает, и я не могу понять, почему.

Спасибо!

Answer 1

Хорошо, я достиг цели: http://jsfiddle.net/MaxMarkson/khZqW/12/

$('#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)) + ")");
        }
    });
});

Я не уверен, что это лучшее решение, но оно работает: я использую только один параметр и оцениваю движение по каждой оси, используя "параметр преобразования", в этом случае деление между двумя приращениями дельты для оси y и 1 для x ось.

Answer 2

Попробуйте это: - http://jsfiddle.net/adiioo7/khZqW/8/

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 + ")");
        }
    });
});