共计 879 个字符，预计需要花费 3 分钟才能阅读完成。
根本语法
首先，我在大小为 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。
