viewBox
viewBox就是视野，我们可以把它看作是一张照片。
viewBox有四个参数，viewbox="x, y, width, height"
坐标系统
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 200"
>
</svg>
如上述代码所示，viewBox在画布上定义了一个从(0,0)点开始，宽为100，高为200的可显示区域，超过这个区域边界的元素将不会显示。
viewPort
viewPort是视窗，视窗是svg的容器。
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="400"
viewBox="0 0 100 200"
>
</svg>
如代码所示，定义了一个宽为200，高为400的容器视窗。
因为viewBox是宽为
前面我们说到，viewBox就是视野，我们可以把它看作是一张照片。
- 如果容器大小，比viewBox大小更大，那么相片整体会放大，以填满整个容器
-
如果容器大小，比viewBox大小更小，那么相片整体会缩小，以填满整个容器
图
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="400"
viewBox="0 0 100 200"
>
</svg>
如代码所示，容器视窗宽为200，高为400；viewBox是宽为100，高为200。容器大小是viewBox大小的一倍大，所以最后看到的内容是被放大了一倍的效果。
preserveAspectRatio
用于设置如何在视窗中显示viewBox的内容。
此属性有两个值，
第一个值：设置viewBox和视窗的对齐方式。
第二个值：如何维持宽高比
第一个值
x轴方向的对齐：
| 对齐方式 | 说明 |
|---|---|
| xMin | 视窗与viewBox左边对齐 |
| xMid | 视窗与viewBox中心对齐（在x轴上中心对齐） |
| xMax | 视窗与viewBox右边对齐 |
y轴方向的对齐：
| 对齐方式 | 说明 |
|---|---|
| YMin | 视窗与viewBox左上边对齐 |
| YMid | 视窗与viewBox中心对齐（在y轴上中心对齐） |
| YMax | 视窗与viewBox右下边对齐 |
第一个值的组合规则是：
X轴的对齐方式 + Y轴的对齐方式
如：xMaxYMax，意思是X轴上右对齐，Y轴下对齐。
图
第二个值
| 宽高比 | 说明 |
|---|---|
| meet | 保证viewBox宽高比，在视窗内能够完全显示viewBox的前提下，尽可能去放大viewBox |
| slice | 保证viewBox宽高比，尽可能去放大viewBox, 填满视窗。 |
| none | 不用保证viewBox宽高比，直接填满视窗。 |
- meet viewBox宽高比保证，且显示完全
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="400"
viewBox="0 0 200 100"
preserveAspectRatio="xMinYMin meet"
>
</svg>
图
- slice viewBox宽高比保证，显示不全
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="400"
viewBox="0 0 200 100"
preserveAspectRatio="xMinYMin slice"
>
</svg>
图
- none viewBox宽高比不保持，显示完全
<svg
xmlns="http://www.w3.org/2000/svg"
width="200"
height="400"
viewBox="0 0 200 100"
preserveAspectRatio="none"
>
</svg>
图
之前学习到这几个属性的时候，我就困惑了很久，后面终于弄清楚了。所以记好笔记博客，与君共享。
如果你通过这篇文章还是没有弄清楚这几个属性，亦或者你懒得看文字，那么可以移步到这个学习视频哦，这个小姐姐讲得不错，我这篇文章就是通过这个视频做的学习笔记。
|
|----》任意门
