html - 响应式 SVG View 框

Question

我在 SVG 中制作了一个“汉堡包按钮”，如下所示。

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
}

<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: transform 0.2s;
      transform: translate(120%, 0);
    }
    #ham-btn:hover #r3 {
      outline: 1px solid transparent;
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>

问题

现在，如果我想让按钮变小，我必须手动调整视口(viewport)和 viewBox 的尺寸。缩小相同数量的 px。

有什么方法可以提高响应速度吗？例如，通过制作 viewBox是视口(viewport)的百分比吗？

According to the spec ，似乎viewBox必须是 <number> , 因此不能是百分比。

有什么想法吗？

谢谢。

---

注一

我没有向按钮添加任何辅助功能或其他功能。这个问题是关于它的响应能力。

---

注2

我知道我可以使 SVG 视口(viewport)占其容器/浏览器视口(viewport)的百分比。

不幸的是，这并没有解决我的问题，为了让这个按钮起作用，我的 viewBox-to-viewport 比例必须保持固定(否则按钮会失去它的形状)。

因此，我想制作 viewBox是视口(viewport)的百分比。

如果有兴趣，我的解决方案利用了以下优势:

• viewBox比视口(viewport)宽，但高度相同
• 因此，preserveAspectRatio用于水平居中 rect小号
• rect尺寸占 viewBox 的百分比

outline是为了修复 Firefox 转换后出现锯齿线的问题。

---

编辑:

如果对 future 的访问者有帮助，可以在此处找到最终按钮(包括完全可访问性):https://codepen.io/magnusriga/pen/KrrJKa

Answer 1

将宽度和高度属性添加到您的 svg CSS。宽度设置和高度自动。

body {
  margin: 0;
  text-align: center;
}

svg#ham-btn {
  margin: 2rem;
  border: 1px solid black;
  fill: #383838;
  /* percentage of viewport - height will autocalculate */
  width: 7vw;
  height: auto;
}

<svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <style>
    #ham-btn {
      cursor: pointer;
    }
    #ham-btn:hover #r1 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(37deg) translate(0%, 28.75%) scaleX(1.1);
    }
    #ham-btn:hover #r2 {
      transition: x 0.2s;
      x: 120%;
    }
    #ham-btn:hover #r3 {
      transition: transform 0.2s;
      transform-origin: 50% 50%;
      transform: rotate(-37deg) translate(0%, -28.75%) scaleX(1.1);
    }
    
  </style>
  <rect id="r3" x="0" y="71.25%" width="100%" height="15%" rx="5%" />
  <rect id="r2" x="0" y="42.5%" width="100%" height="15%" rx="5%"/>
  <rect id="r1" x="0" y="13.75%" width="100%" height="15%" rx="5%" />
</svg>