svg之viewBox

基本语法

首先，我在大小为400 x 400的画布中绘制了一个200 x 200的矩形：

可以发现，没有问题。

现在，我把svg的宽和高改变后：

可以看见，等比例变小了。

简单的理解就是：viewBox规范了画布的大小，svg标签里面的内容都是按照这个画布大小来绘制的，绘制后获得了一张图片，在页面显示的时候，svg的宽和高指定了图片显示多大。

偏移

那如果viewBox规范的画布不是从0,0开始的会怎么样？

参考下面的草图理解：画布的起点是100,100，而宽和高分别是300,300，由此，实际画布的大小是400 x 400，画布上绘制的结果是一个居中，大小为200 x 200的红色矩形：

而显示的时候，我们需要显示的内容是画布起点100,100，大小300 x 300，也就是上面草图重点标出来的位置。

非等比例

接着还有一个问题：如果画布的大小和最终图片显示的svg大小不是等比例的，会怎么样？

可以发现，并没有变形，而是矩阵显示，处理方式类似背景图片。

具体的，就牵扯到一个新属性：preserveAspectRatio 。

preserveAspectRatio

我们对上面的例子进行调整：

其实preserveAspectRatio不写也是有默认值："xMidYMid meet"，相比默认值，我们只是把meet改成了slice。

总结就是，preserveAspectRatio的值由两个参数组成。

第一个参数

可选值有：xMinYMin、xMinYMid、xMinYMax、xMidYMin、xMidYMid、xMidYMax、xMaxYMin、xMaxYMid和xMaxYMax。

x和y表示对齐的轴线，min,mid,max表示对齐的方式。min是往坐标小的方向对齐；mid居中对齐；max是往坐标大的方向对齐。

第二个参数

可选值有：meet和slice。

meet就是前面那种自动调整viewBox到可以在svg画布中完全展示，类似css里background-size:contain；而slice是自动调整viewBox到撑满整个svg画布，非常类似background-size:cover。