如何在Snap.svg中再次单击时重置svg坐标 [英] How to reset a svg coordinates on clicking a second time in Snap.svg

问题描述

我想创建一个图标，在单击该图标时将其变为关闭按钮，然后再次单击该按钮时，它将再次变为原始图标.到目前为止，我已经设法完成了代码的第一部分.我知道我可以使用if if条件，但不知道要检查什么.如果您正在寻找jsfiddle，对不起，因为还没有snap.svg的CDN.

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 the first part of the code. I know that I can use an if else condition but I don't know what to check for. If you are looking for a jsfiddle, I'm sorry since there is no cdn for snap.svg yet.

 <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> 

推荐答案

我想您可以进行基本的切换，这取决于您希望它如何工作..

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

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/

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

这篇关于如何在Snap.svg中再次单击时重置svg坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！