jQuery动画SVG元素

Question

我的应用程序中有一个svg.喜欢

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

我有一个名为'1_dice'的svg元素.在HTML按钮单击中,我希望根据参数为元素设置动画.喜欢

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

我尝试了这个,但这不起作用......

Answer 1

没有插件就有可能,但它涉及到一个技巧.问题是它x不是css属性而是属性,而jQuery.animate只能动画css属性.但您可以使用该step参数为动画指定自己的自定义行为.

foo 是一个不存在的属性,我们在step函数中使用它的动画值.

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

Answer 2

jQuery animate用于动画HTML元素.对于SVG,您必须尝试jQuery SVG插件.请点击链接 - http://keith-wood.name/svg.html