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 上查看此页面 • 报告此内容的问题