SVG之viewport、viewBox、preserveAspectRatio(5)

SVG之viewport、viewBox、preserveAspectRatio(5)

viewport

viewport表示SVG可见区域大小（或者说SVG的画布大小）

如：

<svg width="500" height="500"></svg>

这儿的viewport大小就是500 X 500

viewBox

viewBox是svg标签中的一个属性

如：

<svg width="400" height="300" viewBox="0,0,40,30"></svg>

其有四个用‘,’分割的参数，意思为：

前两个参数确定viewBox盒子左上角的坐标(这儿是(0,0))，第三/四个参数表示viewBox盒子的宽/高

下面用一张图来描述(可视化)viewBox

#svg{
    border: 1px solid #ccc;
}

<svg id="svg" width="400" height="400" viewBox="0,0,70,70">
    <rect x="10" y="10" width="50" height="50"></rect>
</svg>

其实viewBox就是这么简单，复杂的是将其与preserveAspectRatio结合后

preserveAspectRatio

preserveAspectRatio也是svg标签的一个属性

如：

<svg width="400" height="300" viewBox="0,0,40,30" preserveAspectRatio="xMinYMin meet"></svg>

其有两个参数

• 第一个参数

第一个参数用来设置viewBox相对于viewport的位置，其分为两部分：

值	含义
xMin	viewBox的左边缘与viewport的左边缘对齐
xMid	viewBox盒子在viewport中水平居中
xMax	viewBox的右边缘与viewport的右边缘对齐
YMin	viewBox的上边缘与viewport的上边缘对齐
YMid	viewBox盒子在viewport中垂直居中
YMax	viewBox的下边缘与viewport的下边缘对齐

注意上述x,Y的大小写，这些值可以随意组合。如：

xMidYMid：表示viewBox盒子水平且垂直居中

xMinYMin表示viewBox盒子位于左上角

在不考虑第二个参数的情况下，我们再通过一张图来理解一下第一个参数：

• 第二个参数

第二个参数的作用是：在第一个参数确定了viewBox盒子相对于viewport的位置后，在此基础上对viewBox盒子进行缩放。（即第一个参数确定viewBox位置，第二个参数在该位置对viewBox进行缩放）

参数取值：

值	含义
meet	保持纵横比缩放viewBox,类似于background-size中的contain
slice	保持纵横比缩放viewBox,类似于background-size中的cover
none	不保持纵横比缩放viewBox,填满viewBox就行

下面我们一个一个好好理解：

meet:

上图展现了不同位置处，viewBox盒子的缩放方向

下面我们再通过一张动图展现左上角viewBox的缩放过程,以便想象其他情况下的缩放过程

最重要的一点——在缩放过程中，一旦viewBox盒子的某条边与viewport的某条边重合(即缩放到viewport的边界了)，那么meet缩放便终止。这在确定viewBox与viewport两个盒子的边不成比例情况下的缩放时尤为重要

slice：

viewBox盒子的缩放方向同上图展现的一致

我想，或许将slice的特点描述的比较清楚了吧！

none：

none很好理解

本文演示代码很少，还需要自己多实践体会

ps：本文参考了

https://www.w3cplus.com/html5/svg-viewport-viewbox-preserveaspectratio.html