svg 的viewport 和viewbox

viewport 很好理解，就是类似我们的电视机，我们只能通过看到电视机里边的内容，却无法看到电视画面外边的画面。

viewbox是什么呢，你去看文档会有很多答案，但是我觉得把握一个最基本的概念就可以，

viewbox就是最后我们画图的坐标系统，也就是说我们在svg上画东西的时候，就是根据viewbox的坐标系统，来确定最后的位置的。

viewbox为什么这么难理解？

其实看了好多文章，根本都模糊不清楚，看svg精髓这本书里边说的也是云里雾里，不知所云

我觉得可以从以下几点进行理解

viewbox的定义

当viewbox的宽高比和viewport的宽高比相同的时候，首先是设置用户坐标，然后绘图

宽高比相同指的是 svg设置的width：height 与 viewbox设置的 width：height 相等

比如

这里的svg的宽高比是400: 200 = 2

viewbox设置的宽高比是 200: 100 = 2

所以这里的宽高比是一样的

表现如下

渲染过程

svg的viewport的宽高分别是800 和600

viewbox的设置宽高 分别是 0 0 800 600

这里所以用户的坐标是1:1 也就是用户坐标的一像素对应viewport的1像素

所以结果如图

表现如下

渲染过程

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的width和height，在宽高比和viewport相同的时候的情况，现在介绍还是在宽高比和viewport相同的时候的情况下，设置viewbox的x和y是如何变化的。

其实原理是一样的，还是分成两个步骤

a, 首先设置用户坐标，也就是用户坐标到svg viewport的转换关系，

b, 绘制图像

表现如下

可以看到图像向左移动了150px

原理还是按照上面的两步

1， 首先设置用户坐标，这里是svg的是800 ： 600 ，而viewbox的也是800:600

所以这里是用户坐标到实际是1:1，然后因为设置了viewBox 的x是150，所以这里的用户坐标会向左移动150，所以原来绘制在用户坐标范围从（0， 0）到（150，0）的就无法显示出来了。

当宽高不相同的时候，就首先得有个标准，也就是根据什么来设置用户坐标到viewport的转换，也就是preserveAspectRatio

这个说半天也不好理解，不如直接看实际的效果图

/demos/interactive-svg-coordinate-system/index.html

这里可以直接设置，然后查看效果

不过把握大方向

就是先设置用户坐标，再绘图即可。

参考： /2017/03/svg.html