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