SVG基础|SVG VIEWPORT、VIEW BOX和PRESERVEASPECTRATIO

viewport

SVG基础|SVG VIEWPORT、VIEW BOX和PRESERVEASPECTRATIO

　　SVG图像的viewport和viewBox用于设置图像可见区域的大小。

　　SVG VIEWPORT

　　viewport是SVG图像的可见区域。一个SVG图像理论上可以无限大，但是在同一时刻只有图像的某些部分可以被看见。这个可见的区域就被称为viewport。

　　SVG viewport有点类似在浏览器中浏览一个页面。页面可以非常大，它的宽度要比浏览器的视口宽，高度也比浏览器的视口高度高，但是只有在当前屏幕中的页面是可见的区域，

　　你可以在

复制代码

　　这个例子定义了一个500单位宽和300单位高的viewport。

　　在SVG中，只可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素为单位。也就是说上面的例子中，viewport的宽度为500像素，高度为300像素。

　　你也可以为这些值指定单位，在SVG中支持的长度单位有：em、ex、pt、px、、pc、cm、mm、in和百分比值。

　　em：默认的字体大小，通常一个字符的高度
　　ex：字符x的高度
　　px：像素
　　pt：点数，1/72英寸
　　pc：Picas，1/6英寸
　　cm：厘米
　　mm：毫秒
　　in：英寸

　　在

复制代码

　　下面是返回结果，注意观察右边的图形要大于左边的图形。
SVG基础|SVG VIEWPORT、VIEW BOX和PRESERVEASPECTRATIO-LMLPHP

　　SVG VIEWBOX

　　我们可以认为View Box是SVG“真正”的坐标系统。viewBox是用于在画布上绘制SVG图形的坐标系统。这个坐标系统可以比viewport大，也可以比viewport小，并且它可以在viewport中完全可见或部分可见。

　　如果你没有指定viewBox属性，那么浏览器会创建一个默认的用户坐标系统，这个用户坐标系统和viewport坐标系统相同。

　　你可以使用viewBox来指定自己的用户坐标系统。如果你指定的用户坐标系统和viewport坐标系统的宽高比相同，它将会被拉伸填充满整个viewport区域。如果宽高比不相同，你可以使用preserveAspectRatio属性来指定这个坐标系在viewport中是否完全可见，同时也可以指定它在viewport坐标系统中的位置。

　　VIEWBOX的语法

viewBox =

复制代码

　　和值决定viewbox的左上角位置。和值决定viewport的宽度和高度。注意viewBox的宽度和高度不需要设置得和

复制代码

　　在这个例子中，viewBox从(0,0)开始，宽度为50像素，高度为20像素。这意味着，在500像素宽，200像素高的

复制代码

　　第二个例子我们将preserveAspectRatio设置为xMinYMin slice。这个设置同样保持宽高比，但是viewbox是根据宽高比中值较大的那个值来进行缩放。也就是X轴的比例，它的值是2。它返回的图像要比viewport大，超出viewport的部分将会被剪裁掉。下面是代码和返回结果：

复制代码

　　第三个例子我们将preserveAspectRatio设置为none。这意味着viewBox会填充整个viewport，意味X轴和Y轴的比例不相同，图像将会发生变形。

复制代码

　　VIEWBOX的对齐方式

　　我们在来举一些viewBox对齐方式的例子。我们来看下面的代码：

复制代码

　　这个例子中，svg的宽度设置为500，高度设置为100，viewBox设置为0 0 50 50。这意味着X轴方向上的比例为500/50=10，Y轴上的比例为100/50=2。在svg中的圆形半径为25，实际上它的宽高分别都是50个单位，填充满整个viewBox(不是viewport)。

　　当我们指定它为meet时，viewBox将根据Y轴来进行缩放，因为Y轴的比例较小。也就是说，在Y轴方向上viewBox将填充满viewport，但是在X轴方向上，viewBox只会填充2 * 50像素=100像素。因为viewport有500像素的宽度，你必须要指定viewBox的水平对齐方式。这时preserveAspectRatio的align取值的第一部分可以是：xMin，xMid或xMax。

　　下面是preserveAspectRatio取值分别为xMinYMin meet，xMidYmin meet和xMaxYmin meet是的返回结果。
SVG基础|SVG VIEWPORT、VIEW BOX和PRESERVEASPECTRATIO-LMLPHP

　　与上面的例子相类似，如果viewBox的宽高比是在X方向上的值较小，而不是Y轴上，你就要指定Y轴上的对齐方式。

　　下面是一个例子，这里的viewport的宽设置为100，高设置为200。

　　viewBox和上面的例子相同。这里Y轴的比例为200/50=4，X轴的比例为100/50=2。因为还是meet方式，这一次将根据X轴来进行缩放。在X轴方向上viewBox填满整个viewport，在Y轴方向上会填充2 * 50像素=100像素。

　　下面是preserveAspectRatio取值分别为xMinYMin meet，xMinYMid meet和xMinYMax meet是的返回结果。
SVG基础|SVG VIEWPORT、VIEW BOX和PRESERVEASPECTRATIO-LMLPHP

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506182064.html

09-08 14:29