स्नैप एसवीजी के साथ कैसे ट्रिगर करें?

Question

ऐसा लगता है कि ट्रिगर घटना snap.svg के साथ काम नहीं करती है?

मूल रूप से जो मैं चाहता हूं वह click ईवेंट ट्रिगर करता है, लेकिन ऐसा लगता है कि snap.svg या मैं कुछ गलत कर रहा हूं।

मैं इसे हल नहीं कर सका।

तो यह कैसे करें?

JSFIDDLE

var s=Snap("#svg"); 
 
var rect=s.rect(0, 0, 100,600) 
 
rect.attr({ 
 
fill:"#212121" 
 
}); 
 

 
var animating = true; 
 

 
function aniOn() { 
 
    if (animating) { 
 
    rect.animate({ 
 
     width: 400 
 
    }, 1000, mina.elastic); 
 
    }; 
 
} 
 

 
function aniOff() { 
 
    if (animating) { 
 
    rect.animate({ 
 
     width: 100 
 
    }, 1000, mina.elastic); 
 
    }; 
 
} 
 
rect.click(function() { 
 
    animating = true; 
 
    aniOn() 
 
}); 
 

 
rect.mouseout(function() { 
 
    animating = true; 
 
    aniOff() 
 
}); 
 
$("#button").click(function() { 
 
    rect.trigger('click'); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#svg { 
 
    position:absolute; 
 
} 
 

 
#button { 
 
    margin-left:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 

 
<svg id="svg" width="200" height="100%" > 
 
</svg> 
 
<button id="button">Click</button>

Answer 1

rect एक तत्व के रूप jQuery द्वारा मान्यता प्राप्त नहीं है, तो आप $('rect') की तरह, यह लेने के लिए एक चयनकर्ता का उपयोग करना चाहिए या यदि आप अधिक विशिष्ट $('#svg rect') होना चाहता हूँ, और आपको .click() फ़ंक्शन के साथ-साथ .trigger() दोनों में ऐसा करने की आवश्यकता है, इसलिए यह कुछ ऐसा होगा:

jsFiddle

var s=Snap("#svg"); 
 
var rect=s.rect(0, 0, 100,600) 
 
rect.attr({ 
 
fill:"#212121" 
 
}); 
 

 
var animating = true; 
 

 

 
function aniOn() { 
 
    if (animating) { 
 
    rect.animate({ 
 
     width: 400 
 
    }, 1000, mina.elastic); 
 
    }; 
 
} 
 

 

 

 
function aniOff() { 
 
    if (animating) { 
 
    rect.animate({ 
 
     width: 100 
 
    }, 1000, mina.elastic); 
 
    }; 
 
} 
 
$('rect').click(function() { 
 
    animating = true; 
 
    aniOn(); 
 
    console.log('clicked!') // I've added this for demonstration purpose 
 
}); 
 

 
rect.mouseout(function() { 
 
    animating = true; 
 
    aniOff() 
 
}); 
 

 

 
$("#button").click(function() { 
 
    $('rect').trigger('click'); 
 
});

html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
 
#svg { position:absolute; } 
 
#button { margin-left:200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
<svg id="svg" width="200" height="100%" ></svg> 
 
<button id="button">Click</button>