SVG 纵横比介绍

SVG（Scalable Vector Graphics）是一种基于 XML 的图形格式，可通过代码生成图形，具有缩放不失真特性。在使用 SVG 图片时，我们需要考虑它的纵横比，以保证在不同设备上能够正常显示。

什么是纵横比？

纵横比指的是图片的宽度与高度之间的比例关系。在设计和排版时，通常需要指定一种固定的纵横比，从而达到视觉上的平衡和美观。

在 SVG 中，我们可以通过 viewBox 属性来指定图片在视窗中的宽度和高度，并同时设置 preserveAspectRatio 属性来控制纵横比。preserveAspectRatio 属性值由两部分组成，第一部分表示如何对齐图片，第二部分表示如何缩放图片。

例如，值为 xMinYMin meet 表示把图片左上角对齐到视窗左上角，并按比例缩放图片，使得图片的宽度或高度刚好等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。

设置纵横比

在 SVG 中设置纵横比的方式如下：

<svg viewBox="0 0 400 300" preserveAspectRatio="xMinYMin meet">
  <!-- SVG 图形内容 -->
</svg>

其中，viewBox 属性的值表示图片的最大宽度和高度，preserveAspectRatio 属性的值表示纵横比的设置。值的解释如下：

• xMinYMin meet 表示把图片左上角对齐到视窗左上角，并按比例缩放图片，使得图片的宽度或高度刚好等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。
• xMidYMid meet 表示把图片中心对齐到视窗中心，并按比例缩放图片，使得图片的宽度或高度刚好等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。
• xMaxYMax meet 表示把图片右下角对齐到视窗右下角，并按比例缩放图片，使得图片的宽度或高度刚好等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。
• none 表示不进行缩放，图片的宽度和高度都等于视窗的宽度和高度。
• xMinYMin slice 表示把图片左上角对齐到视窗左上角，并按比例缩放图片，使得图片的宽度或高度至少等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。多余部分会被裁剪掉。
• xMidYMid slice 表示把图片中心对齐到视窗中心，并按比例缩放图片，使得图片的宽度或高度至少等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。多余部分会被裁剪掉。
• xMaxYMax slice 表示把图片右下角对齐到视窗右下角，并按比例缩放图片，使得图片的宽度或高度至少等于视窗的宽度或高度，同时图片的宽度或高度不能超过视窗的宽度或高度。多余部分会被裁剪掉。

总结

SVG 纵横比可以通过 viewBox 和 preserveAspectRatio 属性进行设置。在不同设备上使用 SVG 图片时，我们需要根据实际情况选择合适的纵横比，以达到最佳的视觉效果。