jQuery动画SVG元素

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

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

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

我试过这个，但这不起作用……

Answer 1

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

Answer 2

没有插件就有可能，但它涉及到一个技巧。 问题是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 } ); });