Animate svg cx item，设置动画的起点答案

【问题标题】：Animate svg cx item, setting the starting point of the animationAnimate svg cx item，设置动画的起点
【发布时间】：2016-11-10 01:49:15
【问题描述】：

我有一个 SVG 圆圈，我使用 jquery animate 来替换它。

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

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

我需要从 10 到 30，而不是从 0 到 30。

我试过了

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

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

【问题讨论】：

标签： jquery svg jquery-animate

【解决方案1】：

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

您是否尝试过以下方法？

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

【讨论】：