将 SVG 汉堡包图标旋转成 X？

Question

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

这会导致 Internet Explorer、Firefox 和 Safari 出现大量错误问题。 Chrome 似乎没问题，但显然我想用 "right" 的方式编写代码，这样它就可以在所有浏览器中工作。

Here's my live 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 图标，然后您会看到它恢复默认设置时的外观。

条形不是完全笔直，而是出于某种原因看起来是弯曲的。

Screenshot here

我还是 SVG 操作的新手，所以我不确定如何使用 CSS3/JS 正确旋转 <rect> 元素。任何正确方向的帮助或提示将不胜感激。

Answer 1

CSS

使用 css transform: rotate() 我旋转了元素，使它们形成 X
使用 css opacity 和转换；使物体逐渐变透明。

.icon {
  stroke: none;
  fill: #777;
}
.icon .frstbar {
  transform-origin: 10% 50%;
  transition: transform 1s;
}
.icon:hover .frstbar {
  transform: rotate(45deg);
}
.icon .thrdbar {
  transform-origin: 10% 50%;
  transition: transform 1s;
}
.icon:hover .thrdbar {
  transform: rotate(-45deg);
}
.scndbar {
  opacity: 1;
  transition: opacity 1s;
}
.icon:hover .scndbar {
  opacity: 0;
}

<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 100 100">
  <g class="icon">
    <rect class="frstbar" x="10" y="10" width="90" height="12" rx="7" ry="7" />
    <rect class="scndbar" x="10" y="35" width="90" height="12" rx="7" ry="7" />
    <rect class="thrdbar" x="10" y="60" width="90" height="12" rx="7" ry="7" />
  </g>
</svg>

Answer 2

可以使用CSStransform-origin property去掉JS定位。您可以使用 transform-origin: 0 50%;.

将其设置在第一条和第二条的左侧

这样他们旋转的时候就会交叉:

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>

感谢的 JS

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

将 SVG 汉堡包图标旋转成 X？

Rotate a SVG hamburger icon into an X?

javascript

jquery

css

svg

css-transforms

CSS