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元素也会被等比拉伸，而不是维持原有比例。

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