Animate svg cx item，设置动画起点

Question

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

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

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

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

我试过了

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

之前，但动画仍然从 0

开始

Answer 1

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

您尝试过以下方法吗？

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

Animate svg cx item，设置动画起点

Animate svg cx item, setting the starting point of the animation

jquery

svg

jquery-animate