jQuery animate elemento SVG

Question

Ho ottenuto un svg nella mia applicazione. Come

<svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg"> 
<image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" /> 
</svg> 

ho ottenuto un elemento svg nome '1_dice'. In un pulsante HTML, fare clic su Mi piacerebbe animare l'elemento in base ai parametri. Come

$('#btn').click(function(){ 
    $('#1_dice').animate({'x':200},2000); 
}); 

Ho provato a farlo, ma questo non funziona ...

Answer 1

jQuery animato è per animare gli elementi HTML. Per SVG devi provare il plugin jQuery SVG. Si prega di seguire il link - http://keith-wood.name/svg.html

Answer 2

E 'possibile senza un plugin, ma comporta un trucco quindi. Il problema è che x non è una proprietà css ma un attributo e jQuery.animate anima solo le proprietà css. Ma puoi usare il parametro step per specificare il tuo comportamento personalizzato per l'animazione.

foo è una proprietà non esistente il cui valore di animazione viene utilizzato nella funzione di passo.

$('#btn').click(function(){ 
    $('#dice_1').animate(
     {'foo':200}, 
     { 
      step: function(foo){ 
       $(this).attr('x', foo); 
      }, 
      duration: 2000 
     } 
    ); 
});