Animate svg cx项目,设置动画的起点

时间:2016-07-07 16:20:45

标签: jquery svg jquery-animate

我有一个SVG圈,我使用jquery动画取代它。

        $(circle).animate(
            {'foo':30},
            {
                step: function(foo) {
                    $(this).attr('cx', foo);
                },
                duration: 2000
            }
        );

它工作得很好,但我的“圈子”的默认起点是0.我希望它从10开始,但我不知道该怎么做。

我需要从10到30的过渡,而不是从0到30。

我试过

$(circle).attr('cx', '10');

之前,但动画仍然从0开始

1 个答案:

答案 0 :(得分:2)

因为foo不是真正的CSS属性,所以jQuery没有任何东西可以作为起始值查找。所以它显然默认为0。

您是否尝试过以下操作?

    $(circle).animate(
        {'foo':20},
        {
            step: function(foo) {
                $(this).attr('cx', 10+foo);
            },
            duration: 2000
        }
    );