理解 svg 的 viewBox 属性（二）

马黑黑

preserveAspectRatio 属性指定被缩放的图像相对 svg 视口即 svg 实际宽高尺寸的对齐方式，具体来说，它决定如何将 viewBox 塞进 svg 画布里：当 svg 或其相应子元素设置了 viewBox，通过 preserveAspectRatio 属性可以指定 viewBox 的 ① 位置 和 ② 伸缩方式（处理边缘问题）。

不设置 preserveAspectRatio 属性，并不等于 preserveAspectRatio="none"，换言之，preserveAspectRatio 属性缺省时其值并不是无（none）。preserveAspectRatio="none" 表示，不保留坐标的宽高比而是完全按 svg 视口比例缩放坐标，具体是，viewBox 所设定（选定）的区域，遵照 viewBox 的 x 和 y 参数值决定对齐方式，并依照 svg 的实际宽高尺寸对 viewBox 规范的区域（x→width、y→height）进行水平和垂直方向的伸缩，为此，最终映射出来的图形可能会变形。之前我们发布的 svg viewBox 属性在线演示 就设置了 preserveAspectRatio="none"，大家可以调整 viewBox 宽高不同的参数来感受图形变形的情形。

选择 preserveAspectRatio 为 none 时，图形可能会变形，除非各个比例正好合适。变形可能不是我们所需要的，为此，svg 为 preserveAspectRatio 提供了另外一种足够复杂的解决方案：首先是对齐方式，就是映射图像位置如何摆放。这是配合 viewBox 属性工作的 preserveAspectRatio 属性值的第一个参数，名为 alignment（对齐方式），共有九种方式：

	xMinYMin
	xMinYMid
	xMinYMax

	xMidYMin
	xMidYMid
	xMidYMax

	xMaxYMin
	xMaxYMid
	xMaxYMax

不要被这些长字符吓倒，它们的组合有规律：x、Y 分别表示水平、垂直方向，分别对应 viewBox 的 x 参数、y 参数，然后 x 和 Y 都会分别跟 Min、Mid 和 Max 进行组合，其中，Min、Mid、Max 的本意是小、中、大，这里呢，Min 表示往坐标小的方向（向左）、Mid 表示往坐标的中间（居中）、Max 表示往坐标大的方向（向右）对齐。注意，水平方向用小写 x 、垂直方向用大写 Y 分别跟 3M（三个大写美眉）组词，x和Y要配套使用才能规定对齐的方式。以 xMinYMin 为例，它表示，viewBox 在画布上的映射的对齐方式是，X轴往小的方向对齐、Y轴往小的方向对齐，就是讲，这个时候，映射在svg画布上的图案向左、上靠齐，相当于左对齐、上对齐；再以 xMaxYMax 为例，它表示X和Y轴方向都往大的方向对齐，即右对齐、下对齐。其他各值依此类推。

【提示】注意 x、Y 跟 Min、Mid、Max 组词时的大小写问题，x 小写，Y 大写！还有，3个大 MM 的 M 大写！

preserveAspectRatio 若使用了上述对齐方式的任何一种，则它还需要配套使用另一个参数，即处理边缘的伸缩方式，共两个值可选，要么是 meet，要么是 slice ——

meet ：viewBox保持等比例缩放，整个viewBox在viewport中都是可见的。在满足2个约束的条件基础上，尽可能的放大viewBox，当viewBox的宽高比和viewport的宽高比不匹配的时候，取宽高比中最小的那个。简言之，meet参数将按照 viewBox 短边比例来缩放图像。

slice ：修剪viewBox以保持等比例缩放，整个 viewport 区域会被 viewBox 覆盖。在满足2个约束的条件基础上，尽可能的缩小 viewBox，当 viewport 的宽高比和 viewBox 的宽高比不匹配时，取宽高缩放比例中较大的那个。简言之，slice 按照 viewBox 长边比例来缩放图像。

最后给出代码样式：

<svg width="200" height="130" viewBox="0 0 126 82" preserveAspectRatio="xMinYMin slice">
	<!-- 其他代码 -->
</svg>

马黑黑

纯理论篇。抽象，难懂，先懂个大概吧，稍后会给出一个演示实例

红影

这个是讲述的viewBox等比例投射吧，不知preserveAspectRatio 属性缺省时的值是什么

红影

大中小的xy组合给出了9种对齐方式，xy的大小写的规定有点怪。

红影

这个和background:的设置有相似之处，而且伸缩方式的内容也让我想到cover和contain的区别

幸运草

完全看不懂，都是高深知识吖，掩面飘过

马黑黑

红影 发表于 2023-10-31 13:39
大中小的xy组合给出了9种对齐方式，xy的大小写的规定有点怪。

对，从常理上讲，两个都小写就好

马黑黑

红影 发表于 2023-10-31 13:35
这个是讲述的viewBox等比例投射吧，不知preserveAspectRatio 属性缺省时的值是什么

缺省时，alignment 是 xMidYmid，边缘处理方式是 meet：

preserveAspectRatio=“xMidYMid meet"

马黑黑

幸运草 发表于 2023-10-31 16:34
完全看不懂，都是高深知识吖，掩面飘过

基础是 svg ，有一定了解的就可以弄懂

红影

马黑黑 发表于 2023-10-31 16:50
对，从常理上讲，两个都小写就好

既然这样规定了，就是照着规定的执行吧。

红影

马黑黑 发表于 2023-10-31 16:51
缺省时，alignment 是 xMidYmid，边缘处理方式是 meet：

preserveAspectRatio=“xMidYMid meet"

哦，默认是居中、按短边比例缩放图像。知道了，谢谢黑黑解答

马黑黑

红影 发表于 2023-10-31 19:36
哦，默认是居中、按短边比例缩放图像。知道了，谢谢黑黑解答

meet是针对短边，slice是针对长边

马黑黑

红影 发表于 2023-10-31 19:34
既然这样规定了，就是照着规定的执行吧。

大概最好酱紫

红影

马黑黑 发表于 2023-10-31 22:17
meet是针对短边，slice是针对长边

slice放到了更大。

红影

马黑黑 发表于 2023-10-31 22:17
大概最好酱紫

也只能这样子啊

马黑黑

红影 发表于 2023-10-31 23:09
也只能这样子啊

没有BCD选项？

马黑黑

红影 发表于 2023-10-31 23:09
slice放到了更大。

meet 和 slice 行为模式不一样

幸运草

马黑黑 发表于 2023-10-31 16:52
基础是 svg ，有一定了解的就可以弄懂

不懂

红影

马黑黑 发表于 2023-11-1 07:08
没有BCD选项？

去搜了一下，BCD是二进制编码的十进制，不知道这个啊

红影

马黑黑 发表于 2023-11-1 07:08
meet 和 slice 行为模式不一样

是的，得到的效果也不同。