javascript - Rotate a SVG hamburger icon into an X? -
i've designed 3-bar icon using pure svg code in html. i'm using css3 transforms rotate top & bottom bars x shape. problem rotate around own center, need them rotating around icon's center. around i've adjusted x/y coordinates.
this causes lot of buggy issues internet explorer, firefox, & safari. chrome seems alright i'd code "right" way it'll work in browsers.
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: 0.35s linear; -moz-transition: 0.35s linear; -o-transition: 0.35s linear; transition: 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'); } }); i think changing x/y coords causing blurry effect. i've added screenshot below. first you'll see completed x icon , you'll see how looks when animated default.
the bars aren't straight instead crooked reason.
i'm still new svg manipulation i'm not sure how rotate <rect> elements css3/js. or tips in right direction more appreciated.
you can remove js positioning using css transform-origin property. can set on left of first , second bars transform-origin: 0 50%;.
this way cross each other when rotated :
document.getelementbyid('burgericon').addeventlistener('click', function (e) { this.classlist.toggle('open'); });.hamburger { display: block; text-align: center; } svg { cursor: pointer; } .frstbar,.scndbar,.thrdbar { transition: 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 js
note transform-origin property needs same vendor prefixes transform property. have omited them both in above snippet
Comments
Post a Comment