jQuery एनिमेट एसवीजी तत्व

Question

मुझे अपने आवेदन में एक एसवीजी मिला।

<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

jQuery चेतन HTML तत्वों एनिमेट के लिए है। एसवीजी के लिए आपको jQuery SVG प्लगइन का प्रयास करना होगा। कृपया लिंक का पालन करें - http://keith-wood.name/svg.html

Answer 2

प्लगइन के बिना यह संभव है, लेकिन इसमें एक चाल शामिल है। मुद्दा यह है कि x एक सीएसएस संपत्ति नहीं है लेकिन एक विशेषता है, और jQuery.animate केवल सीएसएस गुणों को एनिमेट करता है। लेकिन आप एनीमेशन के लिए अपना खुद का कस्टम व्यवहार निर्दिष्ट करने के लिए step पैरामीटर का उपयोग कर सकते हैं।

foo एक गैर-मौजूदा संपत्ति है जिसका एनिमेटिंग मूल्य हम चरण समारोह में उपयोग करते हैं।

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