1. Web
  2. SVG
  3. 參考
  4. 屬性
  5. 保持長寬比

保持長寬比

preserveAspectRatio 屬性表示一個元素（具有提供特定寬高比的 viewBox）如何適應具有不同寬高比的視口。

SVG 影像的寬高比由 viewBox 屬性定義。因此，如果未設定 viewBox，則 preserveAspectRatio 屬性對 SVG 的縮放沒有影響（<image> 元素除外，其中 preserveAspectRatio 的行為有所不同，如下所述）。

語法

preserveAspectRatio="<align> [<meet or slice>]"

preserveAspectRatio 屬性值由最多兩個關鍵片語成：一個必需的對齊值和一個可選的 meet 或 slice 關鍵詞。

對齊值指示是否強制進行均勻縮放，如果是，則在 viewBox 的寬高比與視口的寬高比不匹配時，使用何種對齊方法。xMidYMid 是預設值。對齊值必須是以下關鍵詞值之一：

none

不強制均勻縮放。如果需要，非均勻縮放給定元素的圖形內容，以便元素的邊界框精確匹配視口矩形。請注意，如果 <align> 為 none，則可選的 <meetOrSlice> 值將被忽略。

xMinYMin

強制均勻縮放。將元素的 viewBox 的 <min-x> 與視口的最小 X 值對齊。將元素的 viewBox 的 <min-y> 與視口的最小 Y 值對齊。

xMidYMin

強制均勻縮放。將元素的 viewBox 的 X 中點值與視口的 X 中點值對齊。將元素的 viewBox 的 <min-y> 與視口的最小 Y 值對齊。

xMaxYMin

強制均勻縮放。將元素的 viewBox 的 <min-x>+<width> 與視口的最大 X 值對齊。將元素的 viewBox 的 <min-y> 與視口的最小 Y 值對齊。

xMinYMid

強制均勻縮放。將元素的 viewBox 的 <min-x> 與視口的最小 X 值對齊。將元素的 viewBox 的 Y 中點值與視口的 Y 中點值對齊。

xMidYMid

強制均勻縮放。將元素的 viewBox 的 X 中點值與視口的 X 中點值對齊。將元素的 viewBox 的 Y 中點值與視口的 Y 中點值對齊。這是預設值。

xMaxYMid

強制均勻縮放。將元素的 viewBox 的 <min-x>+<width> 與視口的最大 X 值對齊。將元素的 viewBox 的 Y 中點值與視口的 Y 中點值對齊。

xMinYMax

強制均勻縮放。將元素的 viewBox 的 <min-x> 與視口的最小 X 值對齊。將元素的 viewBox 的 <min-y>+<height> 與視口的最大 Y 值對齊。

xMidYMax

強制均勻縮放。將元素的 viewBox 的 X 中點值與視口的 X 中點值對齊。將元素的 viewBox 的 <min-y>+<height> 與視口的最大 Y 值對齊。

xMaxYMax

強制均勻縮放。將元素的 viewBox 的 <min-x>+<width> 與視口的最大 X 值對齊。將元素的 viewBox 的 <min-y>+<height> 與視口的最大 Y 值對齊。

以下兩個關鍵詞決定 SVG 應如何相對於容器邊界進行縮放。指定 meet 或 slice 引用是可選的，如果提供，則必須是這兩個關鍵詞之一。meet 是預設值。

meet

縮放圖形，使得：

  • 寬高比得以保留。
  • 整個 viewBox 在視口內可見。
  • 在滿足其他條件的情況下，viewBox 被儘可能放大。

在這種情況下，如果圖形的寬高比與視口不匹配，視口的一部分將超出 viewBox 的邊界（即 viewBox 將繪製的區域將小於視口）。

slice

縮放圖形，使得：

  • 寬高比得以保留。
  • 整個視口被 viewBox 覆蓋。
  • 在滿足其他條件的情況下，viewBox 被儘可能縮小。

在這種情況下，如果 viewBox 的寬高比與視口不匹配，viewBox 的一部分將超出視口的邊界（即 viewBox 將繪製的區域將大於視口）。

示例

當 width > height 時使用 meet

此示例演示了當元素的 width 大於其 height 時使用 meet 的情況。它呈現了三種變體，具有三種不同的對齊值：xMidYMid、xMinYMid 和 xMaxYMid。

html
<svg viewBox="-1 -1 202 40" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
html
<rect x="0" y="0" width="60" height="30">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="70" y="0" width="60" height="30">
  <title>xMinYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMinYMid meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="140" y="0" width="60" height="30">
  <title>xMaxYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMaxYMid meet"
  x="140"
  y="0">
  <use href="#smiley" />
</svg>
html
</svg>
css
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

當 width > height 時使用 slice

此示例演示了當元素的 width 大於其 height 時使用 slice 的情況。它呈現了三種變體，具有三種不同的對齊值：xMidYMin、xMidYMid 和 xMidYMax。

html
<svg viewBox="-1 -1 202 57" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
html
<rect x="0" y="15" width="60" height="30">
  <title>xMidYMin slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMin slice"
  x="0"
  y="15">
  <use href="#smiley" />
</svg>
html
<rect x="70" y="15" width="60" height="30">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMid slice"
  x="70"
  y="15">
  <use href="#smiley" />
</svg>
html
<rect x="140" y="15" width="60" height="30">
  <title>xMidYMax slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="60"
  height="30"
  preserveAspectRatio="xMidYMax slice"
  x="140"
  y="15">
  <use href="#smiley" />
</svg>
html
</svg>
css
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

當 height > width 時使用 meet

此示例演示了當元素的 height 大於其 width 時使用 meet 的情況。它呈現了三種變體，具有三種不同的對齊值：xMidYMin、xMidYMid 和 xMidYMax。

html
<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
html
<rect x="0" y="0" width="30" height="75">
  <title>xMidYMin meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMin meet"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid meet"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="70" y="0" width="30" height="75">
  <title>xMidYMax meet</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMax meet"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>
html
</svg>
css
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

當 height > width 時使用 slice

此示例演示了當元素的 height 大於其 width 時使用 slice 的情況。它呈現了三種變體，具有三種不同的對齊值：xMinYMid、xMidYMid 和 xMaxYMid。

html
<svg viewBox="-1 -1 202 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
html
<rect x="0" y="0" width="30" height="75">
  <title>xMinYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMinYMid slice"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="35" y="0" width="30" height="75">
  <title>xMidYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMidYMid slice"
  x="35"
  y="0">
  <use href="#smiley" />
</svg>
html
<rect x="70" y="0" width="30" height="75">
  <title>xMaxYMid slice</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="30"
  height="75"
  preserveAspectRatio="xMaxYMid slice"
  x="70"
  y="0">
  <use href="#smiley" />
</svg>
html
</svg>
css
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

使用 none 對齊值

此示例演示了一個元素，其對齊值設定為 none。

html
<svg viewBox="-1 -1 192 62" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id="smiley"
      d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
html
<!-- none -->
<rect x="0" y="0" width="160" height="60">
  <title>none</title>
</rect>
<svg
  viewBox="0 0 100 100"
  width="160"
  height="60"
  preserveAspectRatio="none"
  x="0"
  y="0">
  <use href="#smiley" />
</svg>
html
</svg>
css
path {
  fill: yellow;
  stroke: black;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

rect:hover,
rect:active {
  outline: 1px solid red;
}

元素

你可以將此屬性與以下 SVG 元素一起使用

feImage

對於 <feImage>，preserveAspectRatio 定義了引用的影像應如何適應由 <feImage> 元素定義的矩形。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

圖片

對於 <image>，preserveAspectRatio 定義了引用的影像應如何適應由 <image> 元素定義的矩形。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

marker

對於 <marker>，preserveAspectRatio 指示是否必須執行均勻縮放以適應元素視口。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

pattern

對於 <pattern>，preserveAspectRatio 指示是否必須執行均勻縮放以適應元素視口。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

svg

對於 <svg>，preserveAspectRatio 指示是否必須執行均勻縮放以適應元素視口。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

symbol

對於 <symbol>，preserveAspectRatio 指示是否必須執行均勻縮放以適應元素視口。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

view

對於 <view>，preserveAspectRatio 指示是否必須執行均勻縮放以適應元素視口。

值 <align> <meetOrSlice>?
預設值 xMidYMid meet
可動畫的 是

規範

規範
濾鏡效果模組第 1 級
# element-attrdef-feimage-preserveaspectratio
Scalable Vector Graphics (SVG) 2
# PreserveAspectRatioAttribute

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 最後修改於 。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.