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

Question

我有一个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

Answer 1

因为foo ISN开始不是一个真正的CSS属性，jQuery没有什么可以作为初始值查找的。所以它显然是默认为0.

您是否尝试过以下方法？

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