preserveAspectRatio

preserveAspectRatio 是一個屬性,指示是否應該均勻縮放影象。此屬性僅在 <svg> 元素也具有 viewBox 時有效。

預設值為 xMidYMid,它保持寬高比並使 SVG 容器內的路徑居中:

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

StackOverflow 文件

preserveAspectRatio 設定為 none 時,圖示會拉伸以適合框:

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
    <path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</svg>

StackOverflow 文件

preserveAspectRatio 還有許多其他值,但這兩個值是目前最常見的值。