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

jQuery动画SVG元素

2 个答案: