<svg style="display: none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" class="main_svg">
  <style>
    rect {
  fill: red;
}
svg:hover .svg-top,
svg:hover .svg-bottom {
  opacity: 0;
}
svg .svg-rotate1, 
svg .svg-rotate2 {
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}
.inject .svg-rotate1 {
  transform: rotate(45deg);
  transition: all 0.3s ease;
}
.inject .svg-rotate2 {
  transform: rotate(-45deg);
  transition: all 0.3s ease;  
}
.inject .svg-top,
.inject .svg-bottom {
  opacity:0;
}

svg:hover .svg-rotate1 {
  transform: rotate(45deg);
}
svg:hover .svg-rotate2 {
  transform: rotate(-45deg);
}
  </style>
        <g id="shape_menu" class="">
            <rect class="svg-top" x="0" y="0" width="48" height="10"></rect>
            <rect class="svg-rotate1" x="0" y="19" width="48" height="10"></rect>
            <rect class="svg-rotate2" x="0" y="19" width="48" height="10"></rect>
            <rect class="svg-bottom" x="0" y="38" width="48" height="10"></rect>
        </g>
</svg>

<svg class="icon click_change" viewBox="0 0 48 48"><use xlink:href="#shape_menu"></use></svg>

* {
  transition: all 0.3s ease;
}
svg {width: 48px; }

$(function(){
  var main_svg = $(".main_svg");
   $("svg.click_change").click(function(){
     var g_elm_id = $('use', this);
     var g_elm = $(g_elm_id.attr('xlink:href'), main_svg);
     if(g_elm.attr("class") == "inject"){
       g_elm.attr("class", "");
     }else{
       g_elm.attr("class", "inject");
     }
     console.debug(g_elm.attr('class'));
     console.debug(g_elm.hasClass("inject"));
   });
});