svg（viewBox, preserveAspectRatio

这篇文章主要介绍svg的两个属性viewBox和preserveAspectRatio

1. viewBox

viewBox可以理解为截屏工具，viewport表示视区的大小也就是是svg自身大小，可以理解为画布，以下面的代码为例

<svg width="200" height="100" style="border:1px solid blue;">
    <rect x="5" y="5" width="15" height="5" fill="red"/>
</svg>

image.png

viewBox: "x, y, width, height" (x,y)表示截屏位置的起始点，width表示截屏宽度,height表示截屏高度，截屏后的图像将铺满原来的画布,如果viewBox的height和width比例与viewport相同就可以刚好成等比例缩放。
如上图所示：viewBox的区域是红色小方块标记的地方，宽20高10，与viewport的宽比为200/20 = 10， 高比例为100/10 = 10，宽和高比例相等则viewBox的纵横分别放大10倍刚好铺满viewport。起点距离（5）和长方形宽度（15）均放大了10倍。

2. preserveAspectRatio

当viewbox和viewport的宽和高比例不一致的时候可以指定如何缩放。preserveAspectRatio必须与viewBox配合使用，单独使用无效。它有两个参数，第一个参数是必须的第二个是可选的。
preserveAspectRatio："xMidYMid meet"
第一个参数：表示viewBox与viewport是如何对齐的，也就是截屏后开始缩放的起始点位置。

x	y	none
xMin	YMin	-
xMid	YMid	-
xMax	YMax	-

举个例子xMinYmax表示viewport的左下角, xMidYMid表示viewport中心（vieBox会在viewport的中心位置向四周扩散）。
none: 使用none之后会忽略第二个参数meet/slice（第二个参数没有作用了）,它会忽略viewBox与viewport的长宽比例，将viewBox填满viewport,所以纵横伸缩比例可能不一致。横向拉伸了200/20=10倍，纵向拉伸了100/20=5倍。

none.png

第二个参数：表示

meet（默认值）	slice

meet: 保持纵横比例缩放viewBox去适应viewport,如果x方向与y方向放大的比例不一样则都选择较小的比例进行x和y方向放大/缩小。

meet.png
如上图所示，x比例200/20 = 10，y比例100/20=5，最终x和y方向都放大5倍。红色矩形部分的长宽放大了5倍。
slice:保持纵横比例缩放viewBox去适应viewport,如果x方向与y方向放大的比例不一样则都选择较大的比例进行x和y方向放大/缩小。放大后超出viewport的部分将被剪切。
slice.png
如上图所示，x比例200/20 = 10，y比例100/20=5，最终x和y方向都放大10倍。红色矩形部分的长宽放大了10倍。