之前做 weex-svg 的时候，开发者第一次接触 SVG （手写那种，虽然很多情况都有设计师使用 AI 来完成这项工作，但还是不排除需要利用到 svg 的每个 元素）。
才开始，大家都会困惑于 viewBox 和 viewport这两个属性，大家可能也会看到 svg 代码中的千奇百怪。是的，自己也曾为此困惑，宝宝当时内心:
之前自己在做 SVG 学习笔记 的时候，也曾翻译过 Jakob Jenkov 的 关于 [viewport 与 viewbox] (http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) 的区别。
翻译地址: http://events.jackpu.com/svg/#/prop-viewbox-and-viewport
今天再详细的说下这两者的属性。
viewport
viewport 也就是 可视区域 。它指定了 SVG 图像可见的范围，比如我们指定了一个 100px 的盒子，里面装下了一个500px 的圆，那么肯定你是看不全整个圆的。是不是大家也想到我们html5 中的 meta tag 中的 viewport 属性，它俩确实有些相像，我们都可以去设置他们区域的大小，比如 width 和 height。你也可以通过 css 的 class 来指定具体的高度。当然 css 中还有很多属性也是支持对 svg 进行样式表现的。
*你设置了多大的viewport你演技肯定看不到多的部分*
viewbox
viewbox 也就是 视盒 。它实际上可以看做是真正的一个坐标系，它定义了一个范围。是不是很惊喜？
实际我们再不设置 viwebox 的时候，viewbox 整个范围就是 viewport 的大小，如果指定了 viewbox 的话，则表示，我只需要表现这个区域的东西。
感谢 oxxostudio 提供的图片说明
viewbox 需要定义四个数据，也就是(x y width height)。前两个值定义盒子的左上角，后面两个单位定义盒子的右下角。一旦这个坐标系简历了，那么区域里面的所有元素的定位和形状则完全参照这个坐标系建立。
比如下面这个 svg 图形
<svg width="300" height="300">
<line x1="20" y1="40" x2="280" y2="40" stroke="#000" stroke-width="2" />
</svg>
<svg width="300" height="300" viewbox="0 0 900 900">
<line x1="20" y1="40" x2="280" y2="40" stroke="#000" stroke-width="2" />
</svg>
通过上图对比，可以发现使用 viewbox 整个图形相对原来的图形压缩了一些，这是因为整个坐标系由原来的 (300, 300) -> 变成了 (1000, 1000) 因此原来的长度在新的坐标系中变短了。
如果我们的图形超过了viewbox 的设置范围效果是怎样的呢？
可以查看 xooxstudio 的动图效果:
preserveAspectRatio
preserveAspectRatio, 表示长宽高比，它需要配合 viewbox 来使用 。因为一般情况下 viewbox 与 viewport 在长宽高的比例上是一致的，但是如果出现不一样的，这个时候我们需要通过 preserveAspectRatio 来设置 SVG 的图像显示方式。它有两个参数构成:
- align
align 由两对参数 构成，分别表示 viewbox 与 viewport 在水平和垂直方向上的对其方式
| value | details |
|---|---|
| xMin | viewport 和 viewBox 水平靠左 |
| xMid | viewport 和 viewBox 水平居中 |
| xMax | viewport 和 viewBox 水平靠右 |
| YMin | viewport 和 viewBox 垂直靠上 |
| YMid | viewport 和 viewBox 垂直居中 |
| YMax | viewpor t和 viewBox 垂直靠下 |
我们设置它的值应该是这样:
xMaxYMax
xMidYMid
- meet Or Slice
这是第二个参数，表示填充规则。meet 则表示等比例缩放viewbox，直到宽或者高填满整个 viewport。而 slice 则表示等比例缩放，直到图形填满整个部分超过的部分会裁掉。
透过下面的PS 缩放操作可以了解两者的差别：
设置为 meet
设置为slice