小编Tho*_*ncy的帖子

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

这会导致Internet Explorer,Firefox和Safari出现很多错误问题.Chrome似乎没问题,但显然我想以"正确"的方式对其进行编码,因此它可以在所有浏览器中运行.

这是我的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: …