SVG之ViewBox

最近开始看SVG Essentials。找不到中文版的，逼着本身看原版书，进度比较慢，不过边学技术边学英语仍是挺有成就感的^_^。
目前看到Chapter 4，有必要先停下来整理下viewport这个知识点，我的感受挺关键的。

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是个400*400的正方形，可是单位不是px，也不是任何一个css单位，就当是一个假的单位吧。在viewBox放了一个圆，这个圆的半径是200，单位也不是px，而是变成了和viewBox的单位如出一辙的那个假的单位。为啥说是假的呢？由于这个单位表明的长度是会变的，接着看。
svg有个特色，在默认状况下，会调整这个viewBox的大小，让这个viewBox正好能被放进svg里去。拿上面例子来讲，viewBox是个正方形，而svg的宽度比高度小，因此就把viewBox的大小缩小到和svg宽度同样，就能正好将viewBox放进svg里来了。因此如今viewBox的实际大小是个150px*150px的正方形。
因此如今能够肯定的是，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元素也会被等比拉伸，而不是维持原有比例。

第一个知识点整理完毕，待续~ 必须啃完人生第一本原版技术书！！！