SVG汉堡菜单

三个条纹应该很容易绘制。 在网络上有很多不同的方法 。 也就是说，SVG绝对是处理它的最好方法。 汉堡菜单非常简单，我们可以在SVG中手动绘制。

三个矩形，均匀分布：

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

随意摆弄这些数字，以获得所需的尺码和样式。

您可能不知道的很棒的东西？ SVG具有圆角，就像CSS具有border-radius ！ 它以rx属性的形式出现。 看看这个：

如果您的设计更柔和并且使用了圆形的内容，那么对您的设计可能会更好。

翻译自: https://css-tricks.com/snippets/svg/svg-hamburger-menu/