jQuery एनिमेट एसवीजी तत्व - jquery, svg, jquery-animate, jquery-svg

मुझे अपने आवेदन में एक 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_दिस" नाम का एक svg तत्व मिला। HTML बटन क्लिक में मैं मापदंडों के अनुसार तत्व को एनिमेट करना पसंद करूंगा। पसंद

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

मैंने यह कोशिश की, लेकिन यह काम नहीं कर रहा है ...

उत्तर:

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

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

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

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