jQuery的SVG动画元素

我在我的应用程序中的SVG。像jQuery的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); 
});

我尝试这样做，但这并不工作...

来源

2012-08-03 ramesh

如果页面的DOCTYPE不是HTML5，请注意ID必须以字母开头。 – undefined 2012-08-03 05:17:37

感谢您的回复..我的DOCTYPE是<！DOCTYPE html> 我也改名为“骰子”。但不工作，甚至$（'＃dice'）。hide（）;这是工作.. plz help – ramesh 2012-08-03 05:22:47

$（'＃dice'）。hide（）; - 这是工作...但动画不工作 – ramesh 2012-08-03 05:31:39

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

来源

2012-11-12 17:57:10

更多精确的，jQuery动画是用于动画CSS属性。一些CSS可以应用于SVG元素，例如不透明度，填充，笔画。参见[这篇文章]（http://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/）的一些解释。 – Sygmoral 2015-12-27 03:57:12

这是可能的没有插件，但它涉及一个技巧然后。问题是，x不是CSS属性，但属性和jQuery.animate只有动画的CSS属性。但是你可以使用step参数指定动画自定义的行为。

foo是一个不存在的属性，它的动画值，我们在阶跃函数使用。

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

来源

2015-12-27 03:51:33 Sygmoral

只有当你想给的值是一个数字时，这才起作用，因为step函数只需要一个数字。 – 2018-02-05 18:30:41

jQuery的SVG动画元素

回答

相关问题