Snap Svg ile nasıl tetiklenir?

Question

Tetikleyici olay snap.svg ile çalışmıyor mu?

Temel olarak, istediğim click olayını tetikliyor ancak snap.svg ile çalışmıyor gibi görünüyor ya da yanlış bir şey yapıyorum.

bunu çözememiştir.

Peki nasıl yapmalı? bir öğesi olarak jQuery tarafından tanınmayan

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, sen $('rect') gibi onu almak için bir seçici kullanın veya $('#svg rect') daha spesifik olmak istiyorsanız ve gerektiği Eğer .trigger() yanı sıra .click() fonksiyonu hem de bunu yapmak gerekir, bu nedenle böyle bir şey olacak:

o, ben "rect.click (function)" demek 0

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>