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

Question

我有一个<div id="Frame">元素，其中是一个<svg>元素。我希望<svg>元素在帧中居中，并以1/1的纵横比增长，直到一条边占用了90%的可用空间(因此它几乎填满了整个空间，但有一点边界(。但我无法让SVG增长。我读到了许多其他类似的SO答案，有些人说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>