viewport
viewport 很好理解，就是类似我们的电视机，我们只能通过看到电视机里边的内容，却无法看到电视画面外边的画面。
viewbox
viewbox是什么呢，你去看文档会有很多答案，但是我觉得把握一个最基本的概念就可以， viewbox就是最后我们画图的坐标系统，也就是说我们在svg上画东西的时候，就是根据viewbox的坐标系统，来确定最后的位置的。
viewbox为什么这么难理解？ 其实看了好多文章，根本都模糊不清楚，看svg精髓这本书里边说的也是云里雾里，不知所云
我觉得可以从以下几点进行理解
viewbox 和viewport的宽高比相同
viewbox的定义
当viewbox的宽高比和viewport的宽高比相同的时候，首先是设置用户坐标，然后绘图
宽高比相同指的是 svg设置的width：height 与 viewbox设置的 width：height 相等 比如
<svg width="400" height="200" viewbox="0 0 200 100"><svg>
这里的svg的宽高比是400: 200 = 2 viewbox设置的宽高比是 200: 100 = 2 所以这里的宽高比是一样的
例子1
<svg width="800" height="600" viewBox="0 0 800 600">
...
</svg>
表现如下
渲染过程 svg的viewport的宽高分别是800 和600 viewbox的设置宽高 分别是 0 0 800 600 这里所以用户的坐标是1:1 也就是用户坐标的一像素对应viewport的1像素 所以结果如图
<svg width="800" height="600" viewBox="0 0 400 300">
...
</svg>
表现如下
svg的viewport 宽高依然是800和600 viewbox的宽高比变成0 0 400 300 这里的一步首先是确定用户坐标，因为设置的用户坐标是400 * 300 ，但是实际的viewport是800和600，所以对应起来就是用户坐标的1像素对应viewport的二像素 所以 当绘制图像的时候，原来在用户坐标100， 100的点，在viewbox 是 0 0 800 600的时候，对应的viewport的物理像素是100，100的点，但是到了viewbox是 0 0 400 300的时候，用户坐标100， 100的点，对应的物理像素变成了200， 200的点了，所以整个图像变大了 这里注意的是绘制图像的坐标始终是没有变，原来是100，100 还是100，100，变化的是用户坐标到svg的viewport的转换变化了。
viewbox的 x，y
上面介绍了viewbox的width和height，在宽高比和viewport相同的时候的情况，现在介绍还是在宽高比和viewport相同的时候的情况下，设置viewbox的x和y是如何变化的。
其实原理是一样的，还是分成两个步骤 a, 首先设置用户坐标，也就是用户坐标到svg viewport的转换关系， b, 绘制图像
例子1
<svg width="800" height="600" viewBox="0 0 800 600">
...
</svg>
表现如下
可以看到图像向左移动了150px 原理还是按照上面的两步 1， 首先设置用户坐标，这里是svg的是800 ： 600 ，而viewbox的也是800:600 所以这里是用户坐标到实际是1:1，然后因为设置了viewBox 的x是150，所以这里的用户坐标会向左移动150，所以原来绘制在用户坐标范围从（0， 0）到（150，0）的就无法显示出来了。
viewbox 和viewport的宽高比不相同的时候
当宽高不相同的时候，就首先得有个标准，也就是根据什么来设置用户坐标到viewport的转换，也就是preserveAspectRatio 这个说半天也不好理解，不如直接看实际的效果图
www.sarasoueidan.com/demos/inter… 这里可以直接设置，然后查看效果
不过把握大方向 就是先设置用户坐标，再绘图即可。
