Animiere Svg cx Element, setze den Startpunkt der Animation

Question

Ich habe einen SVG-Kreis und ich benutze jquery animate, um es zu verschieben.

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

Es perfekt funktionieren, aber der Standard-Ausgangspunkt meines „Kreis“ ist 0. ich es bei 10 beginnen soll, aber ich weiß nicht, wie das zu tun.

brauche ich einen Übergang von 10 bis 30, und nicht 0 bis 30.

Ich habe versucht

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

vor, aber die Animation beginnt noch bei 0

Answer 1

Weil foo isn Wenn es sich um eine echte CSS-Eigenschaft handelt, hat jQuery nichts als Anfangswert. Also ist es eindeutig auf 0 voreingestellt.

Haben Sie Folgendes versucht?

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