在许多情况下，svg的viewPort和viewBox的宽高并不总是相等的。换句话说，在许多的情况下，viewBox的缩放不按比例强制拉伸的。
那如果我们想要让viewBox在拉伸时保持宽高比，可以使用preserveAspectRatio。
语法
preserveAspectRatio的语法：preserveAspectRatio=[defer] <align> <meetOrSlice>
参数
align
align参数控制viewBox是否强制进行均匀的缩放，主要控制viewBox的位置，主要可分为x、y两个部分。
而这两个部分都各有三个相同的值，分别是min、mid、max。
| 取值 | 描述 |
|---|---|
| xMin | viewBox的最小x值对齐viewport的左边 |
| xMid | viewBox的x轴中点对齐viewport的x轴中点 |
| xMax | viewBox的最大x值对齐viewport的右边 |
| YMin | viewBox的最小y值对齐viewport的顶边 |
| YMid | viewBox的Y轴中点对齐viewport的Y轴中点 |
| YMax | viewBox的最大x值对齐viewport的右边 |
meetOrSlice
| 取值 | 描述 |
|---|---|
| meet | 保持宽高比并将viewBox缩放为适合viewport的大小 |
| slice | 保持宽高比并将所有不在viewport中的viewBox剪裁掉 |
| none | 不保存宽高比。缩放图像适合整个viewBox，可能会发生图像变形。 |
align和meetOrSlice参数结合的情况
xMinYMin、xMinYMid、xMinYMax，meetOrSlice取值
其实之所以y取三个不同的值最终结果都一样是因为，在meetOrSlice取值为meet的时候，是按最短边来缩放，即图片能够完整的显示出来。所以最短边都能够拉伸到跟viewPort的短边等长。所以无论怎么调整y的值都是不会有效果的。
同理，对于meetOrSlice取值为slice的情况，由于是优先把长边显示出来，所以长边那个轴无论赋值成什么，都不会有变化。