Drehen Sie ein SVG-Hamburger-Symbol in ein X?

Question

Ich habe ein 3-bar-Symbol mit reinem SVG Code in HTML entworfen. Ich verwende CSS3-Transformationen, um die oberen & unteren Balken in eine X-Form zu drehen. Das Problem ist, dass sie sich um ihr eigenes Zentrum drehen, aber ich muss sie um das Zentrum des Symbols drehen. Um das zu umgehen, habe ich ihre X/Y-Koordinaten angepasst.

Dies verursacht eine Menge Buggy Probleme mit Internet Explorer, Firefox, & Safari. Chrome scheint in Ordnung zu sein, aber natürlich möchte ich das "richtig" kodieren, damit es in allen Browsern funktioniert.

Here's my live CodePen

HTML

<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80"> 
    <g class="icon"> 
    <rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/> 
    <rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/> 
    <rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/> 
    </g> 
</svg> 

CSS

.hamburger { display:block; text-align:center; } 
svg { cursor:pointer; } 

.frstbar, .scndbar, .thrdbar { 
    -webkit-transition: all 0.35s linear; 
    -moz-transition: all 0.35s linear; 
    -o-transition: all 0.35s linear; 
    transition: all 0.35s linear; 
} 
#burgericon.open .frstbar { 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
#burgericon.open .thrdbar { 
    -webkit-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 
#burgericon.open .scndbar { width: 0; opacity: 0; } 

JS

$('#burgericon').on('click', function(e) { 

    if($(this).attr('class') != "open") { 
     $(this).attr('class','open'); 
     $('.frstbar').attr('x','25').attr('y','-5'); 
     $('.thrdbar').attr('x','-35').attr('y','55'); 
    } 
    else { 
    $(this).attr('class','default'); 
    $('.frstbar').attr('x','10').attr('y','10'); 
     $('.thrdbar').attr('x','10').attr('y','60'); 
    } 
}); 

Ich denke, auch die X/Y-Koordinaten Ändern einer verschwommenen Effekt verursacht. Ich habe unten einen Screenshot hinzugefügt. Zuerst sehen Sie das abgeschlossene X-Symbol und dann sehen Sie, wie es aussieht, wenn es auf die Standardeinstellungen zurückgesetzt wird.

Die Balken sind nicht perfekt gerade, aber sie sehen aus irgendeinem Grund schief aus.

Screenshot here

Ich bin zu SVG Manipulation noch neu, so dass ich nicht sicher bin, wie man richtig <rect> Elemente mit CSS3/JS drehen. Jede Hilfe oder Tipps in die richtige Richtung wäre mehr als nur geschätzt.

Answer 1

Sie können mithilfe der CSS transform-origin property die JS-Positionierung entfernen. Sie können es mit transform-origin: 0 50%; links vom ersten und zweiten Balken einstellen.

diese Weise können sie einander kreuzen, wenn sie gedreht werden:

document.getElementById('burgericon').addEventListener('click', function (e) { 
 
    this.classList.toggle('open'); 
 
});

.hamburger { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
svg { 
 
    cursor: pointer; 
 
} 
 
.frstbar,.scndbar,.thrdbar { 
 
    transition: all 0.35s linear; 
 
    transform: rotate(0deg); 
 
    transform-origin: 0% 50%; 
 
} 
 
#burgericon.open .frstbar { 
 
    transform: rotate(45deg); 
 
} 
 
#burgericon.open .thrdbar { 
 
    transform: rotate(-45deg); 
 
} 
 
#burgericon.open .scndbar { 
 
    width: 0; 
 
    opacity: 0; 
 
}

<nav class="hamburger"> 
 
    <svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80"> 
 
    <g class="icon"> 
 
     <rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141" /> 
 
     <rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141" /> 
 
     <rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141" /> 
 
    </g> 
 
    </svg> 
 
</nav> 
 
<div> 
 
</div>

Credits David Thomas für die JS

Beachten Sie, dass die transform-origin Eigenschaft die gleichen Anbieter Präfixe braucht als die transform Eigenschaft. Ich habe sie für beide in dem oben genannten Schnipsel

Answer 2

CSS

CSS transform: rotate() gedreht I die Elemente, damit sie die X bilden
CSS opacity und Übergänge; ließ das Objekt allmählich transparent werden.

.icon { 
 
    stroke: none; 
 
    fill: #777; 
 
} 
 
.icon .frstbar { 
 
    transform-origin: 10% 50%; 
 
    transition: transform 1s; 
 
} 
 
.icon:hover .frstbar { 
 
    transform: rotate(45deg); 
 
} 
 
.icon .thrdbar { 
 
    transform-origin: 10% 50%; 
 
    transition: transform 1s; 
 
} 
 
.icon:hover .thrdbar { 
 
    transform: rotate(-45deg); 
 
} 
 
.scndbar { 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 
.icon:hover .scndbar { 
 
    opacity: 0; 
 
}

<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 100 100"> 
 
    <g class="icon"> 
 
    <rect class="frstbar" x="10" y="10" width="90" height="12" rx="7" ry="7" /> 
 
    <rect class="scndbar" x="10" y="35" width="90" height="12" rx="7" ry="7" /> 
 
    <rect class="thrdbar" x="10" y="60" width="90" height="12" rx="7" ry="7" /> 
 
    </g> 
 
</svg>