Ruota un'icona di hamburger SVG in una X?

Question

Ho progettato un'icona a 3 barre utilizzando puro codice SVG in HTML. Sto usando trasformazioni CSS3 per ruotare le barre in basso & in una forma X. Il problema è che ruotano attorno al loro centro, ma ho bisogno che ruotino attorno al centro dell'icona. Per aggirare questo ho regolato le loro coordinate X/Y.

Questo causa un sacco di problemi con Buggy Internet Explorer, Firefox, & Safari. Chrome sembra essere a posto, ma ovviamente mi piacerebbe codificare questo modo "giusto" in modo che funzioni su tutti i browser.

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

Penso anche cambiare la X/Y coordinate sta causando un effetto sfocato. Ho aggiunto uno screenshot qui sotto. Per prima cosa vedrai l'icona X completata e poi vedrai come appare quando ritorna al valore predefinito.

Le barre non sono perfettamente diritte ma invece sembrano sgualcite per qualche motivo.

Screenshot here

Sono ancora nuovo per la manipolazione SVG, quindi non sono sicuro di come ruotare correttamente <rect> elementi con CSS3/JS. Qualsiasi aiuto o consiglio nella giusta direzione sarebbe più che apprezzato.

Answer 1

è possibile rimuovere il posizionamento JS usando il CSS transform-origin property. Puoi impostarlo a sinistra della prima e della seconda battuta con transform-origin: 0 50%;.

questo modo potranno incrociarsi quando vengono ruotate:

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>

crediti verso David Thomas per il JS

notare che la proprietà transform-origin bisogno gli stessi vendor prefix come la proprietà transform. Li ho omessi per entrambi nel frammento di cui sopra

Answer 2

CSS

Uso css transform: rotate() I ruotato gli elementi in modo da formare il X
Uso css opacity e transizioni; ha reso l'oggetto gradualmente trasparente.

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