viewBox用来干嘛
比方说，我用svg画了个半径200px的圆
<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
如果是在一个400*400的画布上，圆正好撑满整个画布，挺好的。
好了，然后我要把这个圆嵌入到自己的页面里的svg标签里去，页面的svg标签尺寸是由实际业务需要来定的，不一定正好是，可能大可能小，还可能不是正方形。
<svg style="width:150px; height:300px">
<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>
正常情况下面浏览器中显示是这个样子的
产品见了肯定不乐意啊，“我要整个圆啊，谁要这种残次品啊”。
咋整的，要么把这个圆的代码改了吧。
可如果不是简简单单一个圆呢，而是一大堆复杂代码，改个鬼啊。
呵呵~此刻，便是viewBox用武之地！
<svg style="width:150px; height:300px" viewBox="0 0 400 400">
<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>
摇身一变就成这样了
圆变小了，展示全了，还垂直居中了。
一件一件事来，看看发生了什么。
viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
前两个暂时用不到，个人理解除非要对内部svg做整体位移，否则一般都是0 0，暂时先不做解释，重点关注后两个参数。
想象一下viewBox是个400400的正方形，但是单位不是px，也不是任何一个css单位，就当是一个假的单位吧。在viewBox放了一个圆，这个圆的半径是200，单位也不是px，而是变成了和viewBox的单位一模一样的那个假的单位。为啥说是假的呢？因为这个单位代表的长度是会变的，接着看。
svg有个特点，在默认情况下，会调整这个viewBox的大小，让这个viewBox正好能被放进svg里去。拿上面例子来说，viewBox是个正方形，而svg的宽度比高度小，所以就把viewBox的大小缩小到和svg宽度一样，就能正好将viewBox放进svg里来了。所以现在viewBox的实际大小是个150px150px的正方形。
所以现在可以确定的是，viewBox的一个单位代表的长度 = 150px/400 = 0.375px。
而viewBox内部的所有数值*0.375px才是真正的长度。那个circle的圆心实际上是在坐标75px, 75px的位置上，半径为75px。
圆的具体大小大概就是这么回事。
再看svg那个默认调整viewBox大小是怎么回事儿。
隐藏属性preserveAspectRatio粉墨登场！
preserveAspectRatio又用来干嘛？
英文直译：维持外观比例。好像还挺语义化的一属性名。
对，这是个属性，它和viewBox的关系特别密切。即使不显示声明这个preserveAspectRatio属性，viewBox也是会有这个属性的默认设置的，即preserveAspectRatio=“xMidYMid meet”
显示声明方式如下：
<svg style="width:150px; height:300px" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
说说preserveAspectRatio的这个参数。
第一个参数有9个不同值可选
xMinYMin,
xMinYMid,
xMinYMax,
xMidYMin,
xMidYMid,
xMidYMax,
xMaxYMin,
xMaxYMid,
xMaxYMax
是不是特有规律啊？x和y表示对齐的轴线，min,mid,max表示对齐的方式。min是往坐标小的方向对齐；mid居中对齐；max是往坐标大的方向对齐（顺带一提svg的坐标0刻度在左上角）。
第二个参数有两个值可选：meet和slice
meet就是前面那种自动调整viewBox到可以在svg画布中完全展示。非常类似css里background-size:contain
而slice是自动调整viewBox到撑满整个svg画布。非常类似background-size:cover
再回看第二张图里那个垂直居中的圆，就能明白为什么会“圆变小了，展示全了，还垂直居中了”。
其实说是preserveAspectRatio的第一个参数有9种值，在确定svg画布宽大于高，或者高大于宽的情况下，可以缩减到就3种值，其他值都是重复的，但在不确定画布尺寸时，还是要明确需求选择合适的参数值。
preserveAspectRatio还有个单独使用的参数：“none”。
这种时候viewBox会被拉伸到和svg画布相同尺寸，而内部的所有svg元素也会被等比拉伸，而不是维持原有比例。
作者：梦梦她爹
来源：segmentfault
原文：https://segmentfault.com/a/1190000009226427?utm_source=tag-newest
