SVG 入门——理解viewport,viewbox,preserveAspectRatio

什么是SVG？

SVG（Scalable Vector Graphics：可缩放矢量图形）是一种用于描述二维矢量图形的XML标准，它可以在任何分辨率下被高保真地显示，也可以被无限放大而不失真，因此非常适合用于图标、图像和动画等场景。

SVG 的基本概念

当我们开始使用SVG进行图形绘制时，需要理解以下几个基本的概念：

viewport

Viewport 是指用户可以看到的 SVG 区域，它的大小可以通过 CSS 或者 HTML 标签属性指定。当SVG渲染时，viewport 就是 SVG 文件外面的那个矩形

viewbox

Viewbox 是指SVG内部以坐标系的方式描述的区域，通常比 viewport 大。它可以应用在SVG元素中，并会影响当前SVG的坐标系。我们在绘制元素时需要将元素放入一个你定义好的视区中，这就是利用 viewbox 实现的。

preserveAspectRatio

preserveAspectRatio 是如何指定 SVG元素适应其中。通常有以下两种方式：

• meet：保持纵横比，在 SVG 视口中垂直或者水平居中，留有空白区域
• slice：保持纵横比，填满 SVG 视口，裁剪掉超出的部分

如何应用这些概念

下面我们将详细介绍如何应用 viewport、viewbox 和 preserveAspectRatio 。

创建SVG元素

SVG 可以通过HTML中的

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

上面的代码就创建了一个宽高都是 500 像素的SVG元素。

应用 Viewbox 和 PreserveAspectRatio

我们在绘制 SVG 元素时，视区中的坐标系通常是通过viewbox定义, 例如，想要一个正方形的视口，大小为 1000，可以写成以下的代码

<svg width="100" height="100" viewBox="0 0 1000 1000" preserveAspectRatio="none"></svg>

其中 viewBox 属性的设置和普通的 SVG 元素使用矩形的方式一样，这里在前两个参数中为 x 和 y 轴的偏移量，后两个参数为宽度和高度的值。

preserveAspectRatio 属性的作用是适配 SVG 视口，通常使用 meet 和 slice 方式。

<svg width="500" height="500" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
  <rect x="50" y="50" width="400" height="400"/>
</svg>

上面的代码可以创建一个视口大小为 500px × 500px 的SVG元素，并在其中绘制了一个 400px × 400px 的矩形。

preserveAspectRatio 属性中的 xMidYMid meet 的含义是：

1. 中心点为 SVG 元素的中心点
2. 纵横比保持不变
3. 将图形缩放到视口大小或者小于视口大小，并在视口中居中

如果我们将上述的属性值改为 slice 并运行代码，则会对视区中的矩形进行裁剪以适应视区，而不是空白区域。