svg: viewport,viewBox,preserveAspectRatio缩放

最近项目中做了一个网络拓扑图的需求，因为是依据坐标来绘制的，所以无法达到大屏的自适应展示的效果。

最后查找了一些文章，发现了viewport, viewBox, preserveAspectRatio属性基本上能满足需求，下面简单介绍下viewport, viewBox, preserveAspectRatio。

viewport:

表示svg的可见区域大小，可以理解为画布大小。
比如：
<svg width="500" height="300"></svg>
这个例子就是SVG代码定义了一个视区，宽500单位，高300单位。
你也可以用以下的单位：

viewBox

在没有单位的情况下，你也可以重新定义坐标，来看看下面这个例子:

<svg width="500" height="200" viewBox=“0 0 50 20" >
    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>
</svg>

这里例子创建了一个宽500，高500的svg元素, viewBox属性含有4个坐标值, x, y, width, height（x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度），这里就代表是0, 0开始，50宽，20高, 换句话说就是500 X 200的svg元素是从0, 0 到50, 20来绘制的。每1单位的坐标位置对应的是500/50=10单位的宽度以及200/20 = 10单位的高度, 这也是为什么20, 10的矩形真正的位置是在200, 100的位置，而且它的宽度10, 高度5分别对应的是100高，50宽。
另外的一个解释就是viewBox的前面两个坐标值是左上角的开始位置(0, 0)，后面两个坐标值(50, 20)是右下角的结束位置。

preserveAspectRatio

上面的例子，SVG的宽高比正好和viewBox的宽高比是一样的，都是4:3. 显然，实际应用viewBox不可能一直跟viewport是一致的。此时，就需要preserveAspectRatio出马了，此属性也是应用在<svg>元素上，且作用的对象都是viewBox。
先看一个例子：

preserveAspectRatio="xMidYMid meet”   

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）。
其中，第1个值又是由两部分组成的。前半部分表示x方向对齐，后半部分表示y方向对齐。家族成员如下：

x, y自由合体就可以了，如：

xMaxYMax
xMidYMid

preserveAspectRatio属性第2部分的值支持下面3个：

现在急需一个活生生的例子，让大家感受下这三个值的表现。
下面看一个例子：
表现原理为：SVG宽400, 高200，viewBox宽200, 高200. x横轴比例是2, y纵轴比例是1. meet的作用是让viewBox等比例的同时，完全在SVG的viewport中显示。这里，最小比例是纵向的1，所以，实际上viewBox并没有任何的缩放。

<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>


<svg width="400" height="200" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

再稍微修改一下就感觉到缩放了。

参考地址：http://tutorials.jenkov.com/s...