SVG 坐标系统

在开始学习如何绘图之前，我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。

数学中的坐标是由 x 轴（水平横向延伸）和 y 轴（垂直纵向延伸）交织组成，交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值，反之为负值，沿 y 轴向上为正值，反之为负值。

而 SVG 网格坐标系统的特点如下所示：

• 以左上角为坐标系的原点，即 (0,0)。
• 横向延伸为 X 轴正方向， x 坐标逐渐增大。纵向为 Y 轴正方向，y 坐标逐渐增大。
• 坐标以像素 px 为单位。

坐标系统单位

SVG 坐标系中对应的值可以指定单位，也可以不指定单位，如果不指定单位则默认单位为 px。

下面是 SVG 中支持的长度单位，包含了常见的 CSS 单位：

单位	描述
px	像素，相对于屏幕分辨率
em	相对于父元素的字体大小
ex	字符的高度 x
cm	厘米
mm	毫米
in	英寸
pt	点（1/72 英寸）
pc	Picas（1/21英寸）

画布

SVG 画布就是用来绘制 SVG 内容的一个区域，这个画布可以无限延伸，我们可以在这个画布的任何位置绘制想要的内容。

SVG 视口(ViewPort)

SVG 的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在 SVG 中被称为"视口"，超出这个视口的图形将会被裁切并且隐藏。所以视口也就是 SVG 的渲染区域，用户能看到 SVG 内容的区域。

那么为什么超过视口的元素会被隐藏呢？这是因为每个 SVG 元素都有一个默认的 overflow: hidden 样式，所以超过视窗的内容不可见。如果想要让超出