SVG Viewport和View Box-CSDN博客

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

Viewport（视口）

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

您可以通过<svg>元素的width和height指定使用的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。

查看例子