缩放SVG以填充90%的可用空间(同时保持高宽比)

Question

我有一个<div id="Frame">元素，其中包含一个<svg>元素。我希望<svg>元素在帧中居中，并以1/1的高宽比增长，直到一个边缘消耗掉90%的可用空间(因此它几乎填满了整个空间，但有一点边框)。但我不能让SVG长出来。我阅读了许多其他类似的答案，有人说CSS覆盖SVG的宽度/高度属性，但我尝试在情况下删除它们(并不理想)，但它仍然没有增长)。另一种常见的解决方法是width: 100%; height: auto;，它对我不起作用。

​

main {
  padding: 0; margin: 0;
  width: 100vw;
  height: 100vh;
  }
  
#FRAME {
  padding: 0; margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: lightyellow;
  position:relative;
}

#FRAME svg {
  max-width: 90%;
  max-height: 90%;
  width: 90%;
  height: auto;
  aspect-ratio: 1/1;
  flex-grow: 1;
}

<main>
  <div id="FRAME">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
      <path d="M0 0h24v24H0z" fill="none"></path>
      <path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
    </svg>
  </div>
 </main>

​

Answer 1

您需要向SVG中添加一个viewBox以确定SVG。

虽然width和height属性有助于保持高宽比，但viewBox有助于正确缩放SVG内容。

<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z" fill="none"></path>
  <path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>