SVG 里的 preserveAspectRatio：给图片一个美观的显示形式（上）

在上一篇文章中，我们介绍了 SVG 中的视图属性，以及如何使用它们来控制 SVG 图像的显示位置和大小。在这一篇文章中，我们将重点关注视图属性中的 preserveAspectRatio 属性，它可以帮助您保持 SVG 图像的纵横比，并在缩放或平移时确保其不被变形。

preserveAspectRatio 属性

preserveAspectRatio 属性用于指定 SVG 图像在缩放或平移时应如何保持其纵横比。它可以接受以下几个值：

• none：不保持纵横比。图像将根据视口的形状和大小进行拉伸或压缩。
• xMinYMin：将图像的左上角与视口的左上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMidYMin：将图像的中间与视口的左上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMaxYMin：将图像的右上角与视口的左上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMinYMid：将图像的左上角与视口的中间对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMidYMid：将图像的中间与视口的中间对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMaxYMid：将图像的右上角与视口的中间对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMinYMax：将图像的左上角与视口的右上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMidYMax：将图像的中间与视口的右上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• xMaxYMax：将图像的右上角与视口的右上角对齐。图像将按比例缩小，直到其宽度或高度与视口的宽度或高度相等。
• meet：将图像缩小到适合视口，同时保持其纵横比。如果图像的宽度和高度都大于或等于视口的宽度和高度，则图像将不会被缩放。
• slice：将图像裁剪到适合视口，同时保持其纵横比。如果图像的宽度或高度大于视口的宽度或高度，则图像将被裁剪掉多余的部分。

使用 preserveAspectRatio 属性

在使用 preserveAspectRatio 属性时，您需要指定两个值：缩放类型和对齐方式。缩放类型指定图像如何缩放，对齐方式指定图像在视口中如何对齐。

例如，以下代码将使图像按比例缩小，直到其宽度或高度与视口的宽度或高度相等，并将图像的左上角与视口的左上角对齐：

<svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="image.png" width="200" height="100" />
</svg>

以下代码将使图像按比例裁剪，直到其宽度或高度与视口的宽度或高度相等，并将图像的中间与视口的中间对齐：

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
  <image xlink:href="image.png" width="200" height="100" />
</svg>

总结

preserveAspectRatio 属性是一个非常强大的工具，可以帮助您确保您的 SVG 图像在任何情况下都能完美显示。通过理解 preserveAspectRatio 属性的工作原理，以及如何使用它来指定缩放类型和对齐方式，您可以轻松地创建出美观且响应迅速的 SVG 图像。