SVG图像的视口和视图框可设置图像可见部分的尺寸。

视口

视口是SVG图像的可见区域。逻辑上，SVG图像可以像我们想要的一样宽和高，但是一次只能看到图像的特定部分。可见区域称为视口。

我们可以使用<svg>元素的width和height属性来指定视口的大小。这是一个例子：

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

本示例定义的视口为500单位宽和300单位高。

坐标系单位

如果我们在[width]和[height]属性中未指定任何单位，则假定这些单位为像素。也就是说，"宽度" 500表示500个像素。

如果我们喜欢使用不同于像素的单位，则可以。这是可以与 <svg>元素一起使用的单位的列表：

我们在<svg>元素上设置的单位仅会影响<svg>元素(视口)的大小。 SVG图像中显示的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>"图像的单位设置为" cm"。两个 <rect>元素都有自己的单位集。一种使用像素(未明确设置单位)，另一种使用" mm"表示"宽度"和"高度"。

这是生成的图像。注意右边的框(宽度和高度的单位为mm)如何大于左边的框。

视图框

我们可以在<svg>元素内重新定义不带单位的坐标的含义。我们可以使用viewBox属性来实现。这是一个例子：

<svg width="500" height="200" viewBox="0 0 50 20" >

    <rect x="20" y="10" width="10" height="5"
          style="stroke: #000000; fill:none;"/>

</svg>

这个例子创建了一个<svg>元素，其宽度为500像素，高度为200。<svg>的viewBox属性包含四个坐标。这些坐标定义了<svg>元素的视图框。坐标是视图框的" x y width height"。

在这种情况下，视图框从" 0,0"开始，宽为" 50"，高为" 20"。这意味着500 x 200像素的<svg>元素在内部使用从'0,0'到'50，20'的坐标系。换句话说，在<svg>内部的形状中使用的坐标中的每1个单位对应于宽度500/50 = 10像素，高度对应200/20 = 10像素。这就是为什么x位置为20且y位置为10的矩形实际上位于" 200,100"，并且其宽度(10)和高度(5)分别对应于100个像素和50个像素的原因。

另一种解释方式是，viewBox属性中的前两个坐标定义<svg>元素左上角的用户坐标，最后两个坐标定义右下角的用户坐标。 。 <svg>内部的空间被解释为从视图框的左上坐标到右下坐标。

这是结果图像：

注意如何将<< rect>元素内的所有坐标解释为1个单位的10个像素。

保持宽高比

如果视口和视图框的宽高比(宽高比)不同，则需要指定SVG查看器(例如浏览器)如何显示SVG图像。我们可以使用<svg <元素的preserveAspectRatio属性来实现。

" preserveAspectRatio"属性采用两个值，两个值之间用空格隔开。第一个值告诉视图框如何在视口内对齐。该值本身由两部分组成。第二个值指示如何保留宽高比(如果有的话)。

指定对齐方式的第一个值由两部分组成。第一部分指定x对齐方式，第二部分指定y对齐方式。这是x和y对齐的值的列表：

通过将y-part添加在x-part之后，可以将x和y-parts组合为一个值。这是两个示例：

xMaxYMax

xMidYMid

这两个示例使视图框与视口的对齐方式不同。第一个示例将视框的右边缘与视口的右边缘对齐。第二个示例将视框的中间与视口的中间对齐。

" preserveAspectRatio"属性值的第二部分可以采用三个不同的值：

" preserveAspectRatio"属性值的第二部分添加到第一部分，以空格分隔。这是两个示例：

preserveAspectRatio="xMidYMid meet"

preserveAspectRatio="xMinYMin slice"

我还没有真正讨论过各种preserveAspectRatio设置的效果，所以让我们看一下。

以下示例均将"宽度"设置为500，将"高度"设置为75，将" viewBox"属性设置为" 0 0 250 75"。这意味着沿着x轴，每个坐标单元将对应于2个像素，但是沿着y轴，每个坐标单元将仅对应于1个像素。如我们所见，x轴的纵横比为500/250 = 2，y轴的纵横比为75/75 = 1. 这可能会导致图像失真，但是在以下示例中，我们将看到各种preserveAspectRatio设置如何处理这些设置。

这是第一个将preserveAspectRatio设置为xMinYMin Meet的示例。这样可以确保保持宽高比，并调整视图框的大小以适合视口。即，根据两个纵横比(y轴的比率为1)中较小的一个对视图框进行缩放。由于xMinYMin部分，视图框将位于视口的左上角。这是代码和生成的图像：

<svg width="500" height="75" viewBox="0 0 250 75"
     preserveAspectRatio="xMinYMin meet"
     style="border: 1px solid #cccccc;">

    <rect x="1" y="1" width="50" height="50"
          style="stroke: #000000; fill:none;"/>

</svg>

第二个示例将" preserveAspectRatio"设置为" xMinYMin slice"。这样可以保留宽高比，但是会根据较大的宽高比(x轴的比例为2)缩放视图框，从而导致图像太大而无法容纳在视口中。图像被称为"切片"。

<svg width="500" height="75" viewBox="0 0 250 75"
     preserveAspectRatio="xMinYMin slice"
     style="border: 1px solid #cccccc;">

    <rect x="1" y="1" width="50" height="50"
          style="stroke: #000000; fill:none;"/>

</svg>

第三个示例将" preserveAspectRatio"设置为"无"。这意味着视图框将填充整个视口，从而使图像失真，因为沿x和y轴的宽高比不相同。

<svg width="500" height="75" viewBox="0 0 250 75"
      preserveAspectRatio="none"
      style="border: 1px solid #cccccc;">

     <rect x="1" y="1" width="50" height="50"
           style="stroke: #000000; fill:none;"/>

</svg>

视图框对齐

到目前为止显示的所有示例都使用了xMinYMin设置。根据要在视口中对齐视图框的方式，可以使用其他设置。我将更深入地了解这些设置的工作方式，但让我们首先来看一个示例：

<svg width="500" height="100" viewBox="0 0 50 50"
     preserveAspectRatio="xMinYMin meet"
     style="border: 1px solid #cccccc;">

    <circle cx="25" cy="25" r="25"
            style="stroke: #000000; fill:none;"/>

</svg>

本示例显示了一个<svg>元素，其中width设置为500，height设置为100。viewBox设置为0 0 50 50。这将导致x轴长宽比为500/50 = 10，y轴长宽比为100/50 =2. 图像中的圆的半径为25，使其宽50个单位，高50个单位。因此，它会填充整个视图框(而不是视口)。

当使用meet说明符时，视图框将根据y轴缩放，因为它的纵横比较小。也就是说，视图框将沿y轴(垂直)填充整个视口，但仅沿x轴填充2 * 50像素= 100像素(纵横比*视图框X尺寸)(水平)。由于视口为500像素宽，因此我们必须指定如何在视口内水平对齐视图框。我们可以使用preserveAspectRatio属性值的第一部分的xMin，xMid和xMax子部分来执行此操作。

这是显示上述示例的三幅图像，它们在preserveAspectRatio属性中使用xMinYMin Meet，xMidYmin Meet和xMaxYmin Meet。请注意，视框的设置而定，其左，中和右对齐方式。

同样，如果图像沿x轴的纵横比小于y轴，则必须指定其y对齐。

这是以前的示例，但现在宽度为100，高度为200：

视图框的大小相同，因此使沿y轴的长宽比(200/50 = 4)大于沿x轴的长宽比(100/50 = 2)。因此，视图框将在x轴方向而不是y轴方向上填充视口。这使得必须为视图框指定y对齐。

<svg width="100" height="200" viewBox="0 0 50 50"
     preserveAspectRatio="xMinYMin meet"
     style="border: 1px solid #cccccc;">

    <circle cx="25" cy="25" r="25"
            style="stroke: #000000; fill:none;"/>

</svg>

这是三张图片，每张图片都使用子部分值" YMin"，" YMid"和" YMax"显示了一种可能的y对齐。