Come attivare con Snap Svg?

Question

Sembra che l'evento di attivazione non funzioni con snap.svg?

In linea di principio ciò che voglio è attivare un evento click, ma sembra non funzionare con snap.svg o sto facendo qualcosa di sbagliato.

Non ho potuto risolverlo.

Quindi come si fa?

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 non viene riconosciuta dal jQuery come un elemento, è necessario utilizzare un selettore per raccoglierlo, come $('rect') o se si vuole essere più specifico $('#svg rect'), e è necessario farlo sia nella funzione .click() sia nella .trigger(), quindi sarà qualcosa del tipo:

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>