如何在Snap.svg中第二次點擊時重置svg座標

Question

我想創建一個圖標，當點擊該圖標並再次點擊按鈕時，它會變成關閉按鈕，它會再次變成原始圖標。到目前爲止，我已經設法完成了代碼的第一部分。我知道我可以使用if else條件，但我不知道要檢查什麼。如果你正在尋找一個jsfiddle，我很抱歉，因爲沒有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> 

Answer 1

你可能只是做一個基本的撥動我猜，這取決於你怎麼想它的工作有點..

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 
      }); 
}; 

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