理解SVG中视窗、viewBox和preserveAspectR

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>

图

之前学习到这几个属性的时候，我就困惑了很久，后面终于弄清楚了。所以记好笔记博客，与君共享。

如果你通过这篇文章还是没有弄清楚这几个属性，亦或者你懒得看文字，那么可以移步到这个学习视频哦，这个小姐姐讲得不错，我这篇文章就是通过这个视频做的学习笔记。
|
|----》任意门