在开始学习如何绘图之前，我们先来看一下 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 样式，所以超过视窗的内容不可见。如果想要让超出部分变为可见，可以将 overflow 属性的值设置为 visible 。
示例：
例如我们看下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<rect width="300" height="300" style="fill:pink;"/>
</svg>
</body>
</html>
上述代码中，我们绘制了一个宽为 300px ，高为 300px 的矩形，矩形的填充的颜色为粉色。但是因为我们没有这个 SVG 的视口宽高，所以视口会默认宽高为 300px * 150px，所以在浏览器中可以看到，矩形的高被隐藏了一半：
除了像上述所说的将 overflow 属性设置为 visible，例如：
<svg style="overflow:visible;">
<rect width="300" height="300" style="fill:pink;"/>
</svg>
我们还可以通过给 <svg> 元素设置 width 和 height 属性来给 SVG 视口设置宽和高。只要给视口设置的宽高大于绘制图形的宽高，那么图形就能够完整的显示啦。
其实画布和视口是两个比较容易混淆的概念，每当我们创建一个 <svg> 元素时，就相当于创建了一个无穷大的画布和一个视口。画布和视口分别对应两个坐标系统，一个为用户坐标系，一个为视窗坐标系。
网友评论