jQuery elemento SVG animado

Question

Tengo un svg en mi aplicación. Como

<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> 

Obtuve un elemento svg llamado '1_dice'. En un botón HTML, haga clic en Me gustaría animar el elemento de acuerdo con los parámetros. Al igual que

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

He intentado esto pero esto no trabajando ...

Answer 1

jQuery animado es para la animación de los elementos HTML. Para SVG tienes que probar jQuery SVG plugin. Siga el enlace - http://keith-wood.name/svg.html

Answer 2

Es posible sin un complemento, pero se trata de un truco. El problema es que x no es una propiedad CSS sino un atributo, y jQuery.animate solo anima las propiedades CSS. Pero puede usar el parámetro step para especificar su propio comportamiento personalizado para la animación.

foo es una propiedad no existente cuyo valor de animación utilizamos en la función de paso.

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