将SVG汉堡包图标旋转为X? [英] Rotate a SVG hamburger icon into an X?

问题描述

我已经使用HTML中的纯SVG 代码设计了 3栏图标.我正在使用CSS3转换来旋转顶部&底部的条形成X形.问题是它们绕自己的中心旋转，但是我需要它们绕图标的中心旋转.为了解决这个问题，我已经调整了它们的X/Y坐标.

I've designed a 3-bar icon using pure SVG code in HTML. I'm using CSS3 transforms to rotate the top & 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.

这会导致Internet Explorer，Firefox和&苹果浏览器.Chrome似乎还不错，但显然我想以正确"的方式编写代码，使其可以在所有浏览器中使用.

This causes a LOT of buggy issues with Internet Explorer, Firefox, & Safari. Chrome seems to be alright but obviously I'd like to code this the "right" way so it'll work in all browsers.

这是我的实时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');
    }
});

我还认为更改X/Y坐标会导致模糊效果.我在下面添加了屏幕截图.首先，您将看到完整的X图标，然后您将看到动画恢复为默认设置时的外观.

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.

这些条并不是很直，但是由于某种原因它们看起来有些弯曲.

The bars aren't perfectly straight but instead they look crooked for some reason.

在此处截屏

我仍然不熟悉SVG操作，因此我不确定如何使用CSS3/JS正确旋转< rect> 元素.在正确方向上的任何帮助或提示将不胜感激.

I'm still new to SVG manipulation so I'm not sure how to properly rotate <rect> elements with CSS3/JS. Any help or tips in the right direction would be more than appreciated.

推荐答案

您可以使用CSS

You can remove the JS positioning by using the CSS transform-origin property. You can set it on the left of the first and second bars with transform-origin: 0 50%;.

这样，它们在旋转时会彼此交叉:

This way they will cross each other when they are 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: 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>

要获得 请注意， transform-origin 属性需要与 transform 属性相同的供应商前缀.我在上面的代码段中都忽略了它们

Note that the transform-origin property needs the same vendor prefixes as the transform property. I have omited them for both in the above snippet

这篇关于将SVG汉堡包图标旋转为X?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！