30.SVG视口和视图框
SVG图片的视口和视图框设置了图片可见部分的尺寸。
视口
视口就是SVG图片的可视区域。SVG图像可以逻辑上与你想要的一样宽和高,但同一时间图像的某一部分是可见的。可见区域就被叫作视口。
你可以通过在<svg>
元素上设置width
和height
属性为其指定视口大小。示例如下:
这个例子定义了一个宽500单位高300单位的视口。
坐标系单位
如果你未在width
和height
属性内指定任何单位,默认单位为像素。也就是说,宽度500表示500像素。
你也可以使用像素以外的单位。下面是你可以在<svg>
元素上使用的单位的列表:
你在<svg>
元素上设置的单位只会影响其(视口)的大小。SVG图像上显示的SVG形状的大小由你在每个形状上设置的单位确定。如果为指定单位,默认为像素。
下面这个例子展示了一个具有一组单位的<svg>
元素,其中由包含一些具有自己的单位的形状:
<svg>
图片有一组单位为cm
的属性。两个<rect>
元素也有自己的单位集。一个使用像素(没有设置明确单位),另一个使用mm
作为width
和height
属性的单位。
最终图片如下,请注意,右侧框(width
和height
单位为mm
)比左侧框更大。
视图框
通过使用viewBox
属性,你可以在<svg>
元素中重新定义没有单位的坐标。示例如下:
此例创建了一个宽度为500像素,高度为200像素的<svg>
元素。<svg>
的viewBox
属性包含四个坐标。这些坐标定义了<svg>
元素的视图框。坐标为视图框的x y width height
。
这个例子中,视图框从0,0
开始,宽50
高20
。这意味着,500x200像素的<svg>
元素内部使用从0,0
到50,20
的坐标系。换句话说,<svg>
内的图形上的坐标系每一个单位对应于宽度上的500/50=10像素和高度上的200/20=10像素。这就是为什么x位置为20,y位置为10的矩形真正位于200,100
,并宽度(10)和高度(5)对应于100像素和50像素。
另一种解释方式是,viewBox
属性的前两个坐标定义了<svg>
元素的左上角的用户坐标,后两个坐标定义了右下角的用户坐标。<svg>
内的空间被解释为从视图框左上坐标到右下坐标。
最终图片如下:
请注意,<rect>
元素内的所有坐标都被解释为一个单位10像素。
保留宽高比
如果视口和视图框没有相同的纵横比(宽高比),你需要指定SVG查看器(例如浏览器)如何显示SVG图片。可以使用<svg>
元素的preserveAspectRatio
属性。
preserveAspectRatio
属性采用由空格分割的两个值。第一个值告诉视图框如何在视口内对齐。这个值本身由两部分组成,第二个值(如果有的话)指示如何保留宽高比。
指定对齐的第一个值由两部分组成,第一部分指定x对齐,第二部分指定y对齐。下面是x和y对齐的值列表:
通过在x部分之后附加y部分,可以将x和y部分组合为单个值,这里有两个例子:
这两个例子以不同的方式将视图框与视口对齐。第一个例子将视图框的右边缘与视口的右边缘对齐。第二个例子将视图框的中间对齐视口的中间。
preserveAspectRatio
属性值的第二部分可以采用三个不同的值:
preserveAspectRatio
属性值的第二部分附加到第一部分,并且以空格分隔。这里有两个例子:
我还没真正讨论过preserveAspectRatio
各种设置的效果,所以让我们来看一下。
下面的例子都将width
设置为500,height
设置为75,viewBox
属性设置为0 0 250 75
。这意味着,x轴上的每个坐标单位对应于2像素,y轴上的每个坐标单位对应于1像素。如你所见,宽高比沿x轴为500/250=2,沿y轴为75/75=1。这可能导致图像失真,但我们将在下面的例子看到各种preserveAspectRatio
设置如何工作的。
这里的第一个例子中preserveAspectRatio
设置为xMinYMin meet
。这将保留宽高比,并调整视图框的大小以适应视口。也就是说,根据两个宽高比中较小的一个(比例为1的y轴)缩放视图框。因为xMinYMin
部分,视图框将位于视口的左上角。下面是代码和最终图片:
第二个例子将preserveAspectRatio
设置为xMinYMin slice
。将保留宽高比,但是根据宽高比中较大的值(比例为2的x轴)缩放视图,这将导致图片太大以至于无法适应在视口内。图片被称为“切片”。
第三个例子中,preserveAspectRatio
被设置为none
。这意味着视图框将填充整个视口,因为x轴和y轴的宽高比不相同,从而会扭曲图像。
视图框对齐
到目前为止,所有示例都是用了xMinYMin
设置。根据你要如何在视口中对齐视图框,你可以使用不同的设置。我将更深入地讲解这些设置如何工作,但让我们先看一个例子:
这个例子使用了一个width
为500height
为100的<svg>
元素。viewBox
设置为0 0 50 50
。最终,x轴上的比例为500/50=10,y轴上的比例为100/50=2。图片上的圆半径为25,使得它宽和高都为50个单位。因此,它填充整个视图框(而不是视口)。
当使用meet
指示符时,视图框将根据y轴缩放,因为它具有较小的比例。这意味着,视图框将沿y轴(垂直)填充整个视口,但沿x轴(水平)仅填充250像素=100像素(比例视图框X维度)。由于视口宽度为500像素,因此你必须制定如何在视口内水平对齐视图框。可以使用preserveAspectRatio
属性值第一部分的xMin
、xMid
和xMax
部分。
下面三张图片展示了preserveAspectRatio
属性值分别为xMinYMin meet
,xMidYMin meet
和xMaxYMin meet
的效果。注意视图框如何根据设置对齐到左侧、中间和右侧。
同样的,如果图片x轴比例比y轴比例小,你必须指定其y对齐方式。
下面这个例子和上面的一样,但是现在的width
为100,height
为200。
视图框具有相同的尺寸,从而使得y轴的比例(200/50=4)大于x轴比例(100/50=2)。因此视图框将在x轴方向填满视口,而y轴方向不会。这使得必须指定视图框的y对齐方式。
下面三张图片显示了y对齐分别为YMin
,YMid
和YMax
:
最后更新于