SVG Viewport和View Box

  1. 云栖社区>
  2. 博客>
  3. 正文

SVG Viewport和View Box

waylau 2016-05-17 17:49:37 浏览1765
展开阅读全文

SVG Viewport和View Box用来设置图像的可见部分的尺寸。

Viewport(视口)

Viewport:视口,视觉窗口,是SVG图像的可见区域。SVG图像逻辑上是能显示你想要的宽和高,但实际上同一时间仅图像的某一部分是可见的。该可见的区域被称为Viewport。

您可以通过<svg>元素的widthheight指定使用的Viewport宽度和高度的下面是一个例子:

<svg width="500" height="300"></svg>

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

坐标单位

如果你不指定任何内部宽度和高度属性的单位,单位都假定为像素。即,宽度500表示500个像素的宽度。

除了像素,还可以使用下面的单位:

单位 描述
em 默认字体大小 ,通常是一个字符高度
ex x字符的高度
px 像素
pt 点(一英寸的1/72)
pc 派卡(一英寸的1/6)
cm 厘米
mm 毫米
in 英寸

在<svg>元素里面设置单位只会影响的<svg>的大小(即Viewport)。在SVG图像中显示的SVG图形的大小由你对每个图形设置的单位决定。如果没有指定单位,各单位将默认为像素。

下面是一个例子:

<svg width="10cm" height="10cm">
    <rect x="50" y="100" width="50" height="50"
          style="stroke: #000000; fill: none;"/>
    <rect x="100" y="100" width="50mm" height="50mm"
          style="stroke: #000000; fill: none;" />
</svg>

该<svg>图像有其单位设置为厘米。两个<rect>元素都有自己的单位设置。一个使用像素(没有单位明确设定),另一个使用毫米。

这里是所得到的图象,右边的(单位毫米)大于左边(单位像素)。

View Box

您可以重新在<svg>元素内部定义没有单位的坐标,通过viewBox属性来实现。下面是一个例子:

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

此示例创建一个<svg>为500像素宽和200像素高,宽度元素的的viewBox属性包含四个坐标。这些坐标就定义了<svg>的viewBox属性。

在这种情况下,View Box跨度从0,0到50,20。这意味着,500 x 200像素 <svg>元素内部使用一个坐标系,它从0,0 到50,20。换言之,图形中使用的坐标,每1个单位,在<svg>对应于宽度500/50 = 10个像素,而在高200/20 = 10个像素。这就是为什么x轴为20及y轴为10的位置的矩形是真正位于(200,100),其宽度(10)和高度(5)对应于100个像素和50个像素。

另一种方式来解释它,viewBox属性的前两个坐标定义的是<svg>左上角的用户坐标,后两个坐标定义的是<svg>右下角的用户坐标。该<svg>内部的空间被解释为从左上角坐标到右下角坐标跨越。

这里是所得到的图象:

注意<rect>里面的所有坐标元素1个单位就代表10像素。

preserveAspectRatio保持宽高比

如果Viewport和View Box不具有相同的宽高比(宽度与高度之比),您需要指定SVG显示器(例如浏览器)如何显示SVG图像。使用<svg>的preserveAspectRatio属性。

该preserveAspectRatio属性需要用空格分隔的两个值。第一个值将告诉您View Box如何在Viewport中对齐。这个值本身就是两部分组成。第二个值将告诉您宽高比如何将被保留(如果有的话)。

第一个值指定的对齐由两部分组成。第一部分指定的x对齐和第二部分指定的y对齐。这里是x轴和y取向的值的列表:

描述
xMin 对齐View Box最小x轴的值与Viewport的左边缘。
xMid 对齐View Box的x轴的中心与Viewport的中心x轴坐标。
xMax 对齐View Box最大x轴的值与Viewport的右边缘。
YMin 对齐View Box最小y轴的值与Viewport的顶部边缘。
YMid 对齐View Box的y轴的中心与Viewport的中心y轴坐标。
YMin 对齐View Box最大y轴的值与Viewport的底部边缘。

这里有两个例子:

xMaxYMax

xMidYMid

在preserveAspectRatio第二部分属性值可以采取三种不同的值:

描述
meet 保持宽高比和比例视图框,以适应内视口。
slice 保留宽高比,任何不适合Viewport宽高比的图像的会被切掉。
none 不保留宽高比。缩放图像以View Box充满完全适应Viewport。比例会被扭曲。

在第二部分preserveAspectRatio属性值附加到第一部分,以空格分隔。这里有两个例子:

preserveAspectRatio="xMidYMid meet"

preserveAspectRatio="xMinYMin slice"

下面的实施例都具有宽度为500,高度为75和的viewBox属性设为0 0 250 75。这意味着,沿x轴的每个坐标单元将对应于2个像素,而是沿着Y轴的每个坐标单位只对应1个像素。在x轴缩放比为500/250=2 ,y轴的缩放比为75/75=1。这可能会导致一个扭曲,但我们会在下面的例子查看如何设置各种preserveAspectRatio。

查看例子


网友评论

登录后评论
0/500
评论
waylau
+ 关注