title: Rotate a SVG hamburger icon into an X?
body: <p>I've designed a <strong>3-bar icon using pure SVG</strong> code in HTML. I'm using CSS3 transforms to rotate the top &amp; bottom bars into an X shape. The problem is that they rotate around their own center, but I need them rotating around the icon's center. To get around this I've adjusted their X/Y coordinates.</p>
  
  <p>This causes a LOT of buggy issues with Internet Explorer, Firefox, &amp; Safari. Chrome seems to be alright but obviously I'd like to code this the "right" way so it'll work in all browsers.</p>
  
  <p><a href="http://codepen.io/yahtzee_party/pen/ZGXXao" rel="nofollow">Here's my live CodePen</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80"&gt;
    &lt;g class="icon"&gt;
      &lt;rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/&gt;
      &lt;rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/&gt;
      &lt;rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#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');
      }
  });
  </code></pre>
  
  <p>I also think changing the X/Y coords is causing a blurry effect. I've added a screenshot below. First you'll see the completed X icon and then you'll see how it looks when animated back to default. </p>
  
  <p>The bars aren't perfectly straight but instead they look crooked for some reason.</p>
  
  <p><a href="http://i.stack.imgur.com/93SRK.jpg" rel="nofollow">Screenshot here</a></p>
  
  <p>I'm still new to SVG manipulation so I'm not sure how to properly rotate <code>&lt;rect&gt;</code> elements with CSS3/JS. Any help or tips in the right direction would be more than appreciated.</p>