Javascript 如何在Snap.svg中再次单击时重置svg坐标

我想创建一个图标，当点击它时，它会变成一个关闭按钮，再次点击按钮时，它会再次变成原来的图标。到目前为止，我已经完成了代码的第一部分。我知道我可以使用if-else条件，但我不知道检查什么。如果您正在寻找JSFIDLE，我很抱歉，因为snap.svg还没有cdn

 <span class="bars" data-icon-name="bars">
          <svg id="svg"></svg> 
 </span>
 <script type="text/javascript">
    var Paper = Snap('#svg'); 
    var linepaths = Paper.line(20, 20, 100, 20);
    var linepaths1 = Paper.line(20, 33, 100, 33);
    var linepaths3 = Paper.line(20, 46, 100, 46);
    Paper.attr({
        stroke:'#fff',
        strokeWidth: 7
    });        
    Paper.click(
       function (){
       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
         });   
    });
    </script> 

var Paper=Snap（“#svg”）；
var linepath=纸张行（20,20,100,20）；
var linepaths1=纸张线条（20,33,100,33）；
var linepaths3=纸张线条（20,46,100,46）；
纸张属性({
笔划：“#fff”，
冲程宽度：7
});        
纸。点击(
函数（）{
线路径。设置动画（{x1:20，y1:20，x2:75，y2:75}，500）；
线路径1.设置动画（{x1:20，y1:75，x2:75，y2:20}，500）；
linepaths3.设置动画（{x1:0，y1:0，x2:0，y2:0}，1）；
linepaths3.attr({
笔划：“#2ecc71”，
冲程宽度：7
});   
});

我想你可以做一个基本的切换，这取决于你希望它如何工作一点

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

function buttonOn() {
           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
           });
};

 function buttonOff() {
    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
           });
};

---

jshiddle

谢谢，有点麻烦，但这正是我想做的。