SVG大师之路 - 坐标系统SVG的世界就是一张无限大的画布，在本篇文章中，我们将了解到如何让阅读器知道在这张画布上应该

SVG的世界就是一张无限大的画布，在本篇文章中，我们将了解到如何让阅读器知道在这张画布上应该显示哪一块区域的内容。如何确定他的尺寸，以及如何在区域内确定点的位置。

1. 视口

文档打算使用的画布区域叫做视口，我们可以在SVG元素上使用width和height属性确定视口的大小，属性的值可以是一个数字，该数字会被当做用户坐标系下面的像素。也可以指定width和height为带有单位的数字。单位的取值是下列值之一

以下是几种合法的SVG视口声明表达式：

<svg width="200" height="150" />
<svg width="200px" height="150px" />

这两个用户都指定了一个200像素宽，150像素高的区域。

<svg width="2cm" height="3cm" />

这个声明指定了一个2厘米宽，3厘米高的区域。

<svg width="2cm" height="36pt" />

混用声明是可行的，但是并不常用，这个元素指定了一个2厘米宽，3厘米高的区域。

还可以指定<svg>元素的height和width为百分比，当元素嵌套在另外一个<svg>标签里面的时候，其百分比根据外层包裹元素进行计算。如果SVG元素为根元素，其百分比根据窗口尺寸进行计算。

阅读器设置了一个坐标系统，其中水平坐标向右边递增，垂直坐标向下边递增。定义在视口的左上角，(x,y)=(0,0)这个点为svg的原点。这个坐标就是一个纯粹的几何系统，没有宽度和高度。其网格线也被认为是无限延伸的。

到目前为止的案例中，没有单位的数值都被视为像素，有时候这并不是我们想要的。比如：你可能想要设置一个坐标系统。其中每个用户坐标表示1/16厘米。在这个系统中，一个边长为40个单位的方块显示的边长为2.5厘米。

为了实现这个效果，我们会在svg上面设置viewBox属性值，这个属性由4个数值组成，它们分别表示想要叠加在视口上面的用户坐标系统的最小x坐标，最小y坐标。宽度和高度。他们分别表示想要叠加在视口上面的用户坐标系统的最小X坐标。最小Y坐标。宽度和高度。

因此，想要在4厘米*5厘米的图纸上面设置一个16个单位的单位系统。要使用这个开始标记。

<svg width="4cm" height="5cm" viewBox="0 0 64 80">

为ViewBox属性指定的数值可以使用逗号或者空格分割。如果宽度或者高度为0，则没有图形显示，宽度和高度大于等于0的时候，为他们指定负值是错误的。

在前面的案例中，视口和viewBox的宽高比是相同的。但是，如果视口的宽高比和viewBox的不一样。会发生什么样的情况呢？在下面这个案例中，viewBox的宽高比是1：1.但是视口的宽高比是1：3（高度是宽度的3倍）

<svg width="45px" height="135px" view-box="0 0 90 90" />

在这种情况下，SVG可以做3件事情：