Snap.svg filters on rotated elements

Seems the filter is rotated after beeing drawn.

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<span class="bars" data-icon-name="bars">
    <svg id="svgid" width="100" height="100"></svg>

 </span>

JavaScript

var Paper = Snap(800,400); 
//Paper.circle(150, 150, 100);
//Paper.line(50, 50, 100, 100);
    var linepaths = Paper.line(20, 20, 100, 20).attr("stroke","#2ecc71");
    var linepaths1 = Paper.line(20, 33, 100, 33).attr("stroke","#2ecc71");
    var linepaths3 = Paper.line(20, 46, 100, 46).attr("stroke","#2ecc71");
    Paper.attr({
        stroke:'#2ecc71',
        strokeWidth: 7
    });     

   var toggle = true;
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
               });
};