jQuery animate elemento SVG - jquery, svg, jquery-animate, jquery-svg

Tengo un svg en mi aplicación. Me gusta

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

Tengo 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. Me gusta

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

Intenté esto pero esto no funciona ...

Respuestas

jQuery animate es para animar elementos HTML. Para SVG tienes que probar jQuery SVG enchufar. Por favor siga el enlace - http://keith-wood.name/svg.html

Es posible sin un plugin, pero implica un truco entonces. El problema es que x no es una propiedad css sino un atributo, y jQuery.animate Sólo anima propiedades css. Pero puedes usar el step parámetro para especificar su propio comportamiento personalizado para la animación.

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

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