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

Ho ottenuto un svg nella mia domanda. Piace

<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 chiamato "1_dice". In un pulsante HTML, fare clic su Mi piacerebbe animare l'elemento in base ai parametri. Piace

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

Ho provato questo, ma questo non funziona ...

risposte:

jQuery animate è per l'animazione di elementi HTML. Per SVG devi provare jQuery SVG collegare. Si prega di seguire il link - http://keith-wood.name/svg.html

È possibile senza un plugin, ma implica un trucco. Il problema è questo x non è una proprietà css ma un attributo, e jQuery.animate solo anima le proprietà CSS. Ma puoi usare il step parametro per specificare il proprio 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
}
);
});