How To Reset A Svg Coordinates On Clicking A Second Time In Snap.svg

I want to create an icon that turns into a close button when clicking on it and on clicking again on the button, it turns into the original icon again. So far I have managed to do

Solution 1:

You could just do a basic toggle I guess, it depends how you want it to work a bit..

Paper.click( function() { if( toggle ) {
                            buttonOn();
                            toggle = false;
                        } else { 
                            buttonOff(); 
                            toggle = true; } 
                    } );

functionbuttonOn() {
           linepaths.animate({x1:20,y1:20,x2:75,y2:75},500);                              
           linepaths1.animate({x1:20,y1:75,x2:75,y2:20},500); 
           linepaths3.animate({x1:0,y1:0,x2:0,y2:0},1);  
           linepaths3.attr({
            stroke:'#2ecc71',
            strokeWidth: 7
           });
};

 functionbuttonOff() {
    linepaths.animate({x1:20,y1:20,x2:100,y2:20},500);                              
           linepaths1.animate({x1:20,y1:33,x2:100,y2:33},500); 
           linepaths3.animate({x1:20,y1:46,x2:100,y2:46},1);  
           linepaths3.attr({
            stroke:'#2ecc71',
            strokeWidth: 7
           });
};

jsfiddle http://jsfiddle.net/2UZr2/5/