上一篇文章里我们真的是浅谈了一下ViewBox相关的理论，列举的是正方形，上篇文章的理论不仅适用于正方形，还适用于 “一切ViewBox自身的长宽比 == svg自身的长宽比” 的情况。
但是有些情况下，开发者还是会存在非常规的情况（ViewBox的长宽比 != svg的长宽比），那这个时候，ViewBox如何适应指定长宽的svg呢？
一句话：“ViewBox在哪个位置上以什么标准去适应svg？”。
这就得提到 preserveAspectRatio 属性了。
它的语法如下：
preserveAspectRatio = "align meetOrSlice"
// 默认值如下：
preserveAspectRatio = "xMidYMid meet"
- align决定了ViewBox在X轴、Y轴上如何与svg对齐。
- meetOrSlice决定了ViewBox到底是以较长边还是较短边去缩放以此来适应svg。
大家在阅读过程中，如果有对坐标系统不理解的，请看这篇文章。
meetOrSlice
取值范围2个，分别是meet（默认值）、slice。
这2个值都是在保证ViewBox自身长宽比的情况下去缩放，有点类似 “background-size”。meet是在svg可视范围内尽可能的完整显示ViewBox，而slice是要占满整个svg的可视区域。
<style>
svg {
background-color: antiquewhite;
}
</style>
<svg
width="500"
height="200"
preserveAspectRatio="xMinYMin meet"
ViewBox="20 20 200 100"
>
<path
d="
M 20 20
L 220 120
"
stroke="black"
></path>
</svg>
上面是meet的效果，而slice的效果如下：
align
写法是小驼峰，比较好记忆。无论x、Y，它们的取值范围都是固定的集合【Min、Mid、Max】。
与之对应，大家可以理解为左对齐、中间对齐、右对齐。
我们还是以上面的代码为例，当 “Y不变，并且保证svg里始终都能显示完整的ViewBox”的情况下，我们看看这3个值在x轴上的变化（Y轴的变化情况与x一样，大家自行举一反三）。
Min
Min的含义就是“ViewBox的语法参数里，第一个参数就是svg可视范围内的x轴上的原点，第二个参数就是svg可视范围内的y轴上的原点”。
Mid
Mid的含义就是两个中点对齐（即逻辑上的中点 与 物理长度上的中点对齐）。我们继续以x轴为例，首先ViewBox在逻辑上的坐标系统起点（20，20），终点（220，120），逻辑上的中点（120， 70），所以逻辑上的中点120与物理长度的中点对齐。那在横轴上的效果自然就是居中对齐。
Max
这个MDN的解释比较怪异，不太建议大家直接用这个属性，从表现形式上看的话，差不多是右对齐的形式，如果有知道这个属性含义的，大家可以评论区里讨论一下，哈哈哈。
最后
本期内容到这里就结束啦，两篇文章我们讲完了ViewBox的那些事，希望我的文章能够对你有帮助，那么我们下期再见～～
