svg之viewBox缩放
举个栗子?
代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<title>svg-viewboxtitle>
head>
<body>
<svg width="100px" height="200px" style="background:#889cee">
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
body>
html>
如图所示，这是上面代码运行的结果。在一个宽为100px，高为200px的画布上，画了一个半径为50的圆。圆的起点坐标是 （50，50）。
但实际使用过程中，不同的业务场景经常需要对画布的大小作出改变，比如现在我们把画布大小改为宽50px、高100px。就会显示成这样：
<svg width="50px" height="100px" style="background:#889cee">
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
里面的内容被画布截断了。我们需要手动再重新修改里面的内容的数值。显然这不是我们想要的结果，我们希望在改变画布大小的同时，里面的内容也可以自动缩放。那么下面我就来利用 viewbox 来实现这个功能。
用 viewBox 解决
我们先给上面的代码加上 viewbox 属性，并且将 viewbox 的值设置为和初始画布1:1。
这里需要说明的是，初始画布的大小一般由内容来定。
viewBox 的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
一般前面两个值不需要修改，设置为0就可以，除非你需要视口在画布里发生位移。
<svg
viewbox="0 0 100 200"
width="100px"
height="200px"
style="background:#889cee"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
运行代码发现和图一是没有区别的。但当我们把画布大小同样修改为宽50px、高100px。显示就会发生变化：
<svg
viewbox="0 0 100 200"
width="50px"
height="100px"
style="background:#889cee"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
如上图，里面的内容跟着画布大小的变化发生了缩放。我们缩放的功能实现了。下面我们来分析下原因。
viewBox 分析
之所以能缩放，是因为svg有个特性，在默认情况下，会调整 viewBox 的大小，让 viewBox 正好能被放进 svg 里去。
还拿上面缩放的栗子来说。
蓝色框是视口的大小，绿色框是内容圆的大小。当画布大小改变的时候，viewBox 需要调整到正好放进 svg 里。所以我们整个显示就缩小了。
以上是视口不变而画布发生改变的情况，我们再来看一个画布不变，视口大小发生变化的。
<svg
viewbox="0 0 50 100"
width="100px"
height="200px"
style="background:#889cee"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
上图，我们画布的大小还是初始大小，但是视口的大小缩小为宽50高100，也就是图中蓝色框的区域。按照 viewBox 需要调整到正好放进 svg 里。那么蓝色区域框着的内容区域（绿色画的区域）就会扩大占满画布。
到此，大概了解了 viewbox 的用法。还有一个属性——preserveAspectRatio。
preserveAspectRatio属性
viewbox 默认这个属性的值为：preserveAspectRatio="xMidYMid meet"
preserveAspectRatio 第一个参数有九个可选值，用来表示视口的对齐方式，以左上角为原点，Min表示靠近原点，Mid表示居中，Max 表示远离原点。
xMinYMin,
xMinYMid,
xMinYMax,
xMidYMin,
xMidYMid,
xMidYMax,
xMaxYMin,
xMaxYMid,
xMaxYMax
继续举上面的栗子，当把 viewbox 改为宽高都为100，并且加上 preserveAspectRatio 属性，值为 xMaxYMax：
<svg
viewbox="0 0 100 100"
width="100px"
height="200px"
style="background:#889cee"
preserveAspectRatio="xMaxYMax"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
我们发现视口是离原点最远对齐的，而不是 preserveAspectRatio 的默认值为居中对齐。有兴趣的可以试试其他值，看看有什么变化。
下面来看看第二个参数： meet 、 slice or none
meet就是前面那种自动调整 viewBox 可以在 svg 画布中完全展示（以画布的最小边为界，不会超过最小边大小）。
上面的栗子都是这种情况，这里就不再举栗子了。
slice就是调整 viewBox 可以撑满 svg 画布（以画布最大边为界，可能会超过最小边，但不会超过最大边）。
改变 preserveAspectRatio 的值为 slice，
<svg
viewbox="0 0 100 100"
width="100px"
height="200px"
style="background:#889cee"
preserveAspectRatio="xMaxYMax slice"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
如上图，对其方式是离原点最远对齐，并且第二个参数为 slice 表示视图会撑满视图最大的边。也就是 viewbox 的高100会以画布的高200做调整。
none表示 viewBox 会被拉伸到和 svg 画布相同尺寸，里面的内容也会被等比拉伸，不能维持原有比例，如下图：
<svg
viewbox="0 0 100 100"
width="100px"
height="200px"
style="background:#889cee"
preserveAspectRatio="none"
>
<circle cx="50" cy="50" r="50" fill="#cec">circle>
svg>
over