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動畫元素

回答

相關問題