svg: viewport,viewBox,preserveAspectRatio缩放

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

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

viewport:

表示svg的可见区域大小,可以理解为画布大小。
比如:

这个例子就是SVG代码定义了一个视区,宽500单位,高300单位。
你也可以用以下的单位:

svg: viewport,viewBox,preserveAspectRatio缩放_第1张图片

viewBox

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


    

这里例子创建了一个宽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出马了,此属性也是应用在元素上,且作用的对象都是viewBox。
先看一个例子:

preserveAspectRatio="xMidYMid meet”   

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

svg: viewport,viewBox,preserveAspectRatio缩放_第2张图片
x, y自由合体就可以了,如:

xMaxYMax
xMidYMid

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

svg: viewport,viewBox,preserveAspectRatio缩放_第3张图片

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


    




    

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

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

你可能感兴趣的:(svg)