preserveAspectRatio

preserveAspectRatio 屬性指示具有提供給定縱橫比的視窗的元素如何適應具有不同縱橫比的視窗。

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

語法

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

preserveAspectRatio 屬性值最多包含兩個關鍵字：一個必需的對齊值和一個可選的 meet 或 slice 關鍵字。

對齊值指示是否強制統一縮放，如果是，則在 viewBox 的縱橫比與視窗的縱橫比不匹配的情況下使用哪種對齊方法。xMidYMid 是預設值。對齊值必須是以下關鍵字值之一

無: 不強制統一縮放。如有必要，非均勻地縮放給定元素的圖形內容，以使元素的邊界框完全匹配視窗矩形。請注意，如果 <align> 為 無，則忽略可選的 <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 是預設值。

滿足

按比例縮放圖形，使

縱橫比得到保留。
整個 viewBox 在視窗內可見。
viewBox 儘可能放大，同時仍滿足其他條件。

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

切片

按比例縮放圖形，使

縱橫比得到保留。
整個視窗由 viewBox 覆蓋。
viewBox 儘可能縮小，同時仍滿足其他條件。

在這種情況下，如果 `viewBox` 的縱橫比與視窗不匹配，則部分 `viewBox` 將超出視窗邊界（即，`viewBox` 將繪製到的區域大於視窗）。

示例

當寬度 > 高度時使用 `meet`

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

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

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>
</svg>

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>
</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;
}

當寬度 > 高度時使用 `slice`

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

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

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>
</svg>

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>
</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;
}

當高度 > 寬度時使用 `meet`

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

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

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>
</svg>

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>
</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;
}

當高度 > 寬度時使用 `slice`

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

html,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

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>
</svg>

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>
</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,
body,
svg {
  height: 100%;
}

/* place flex element on each iframe body for responsiveness at different screen sizes */
body {
  display: flex;
}

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>
</svg>

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>
</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

對於 `<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
可縮放向量圖形 (SVG) 2 # PreserveAspectRatioAttribute