持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情
在SVG画布中，如果要想插入一个形状，可以在文档中创建一个对应的元素
不同的元素对应着不同的形状，并且可以使用不同的属性来定义图形的大小和位置
也就是说相比于canvas使用命令式进行绘图，SVG更多的时候使用的是声明式的方式进行绘图
SVG所支持的基本形状有:矩形、圆形、椭圆、线条、折线、多边形、路径
rect
rect可以用来绘制一个矩形, 默认填充色为黑色
| 属性 | 说明 |
|---|---|
| x | 矩形左上⻆的 x 轴位置 |
| y | 矩形左上⻆的 y 轴位置 |
| width | 矩形的宽度 |
| height | 矩形的高度 |
| rx | 圆⻆的 x 轴方位的半径 |
| ry | 圆⻆的 y 轴方位的半径 |
<rect x="100" y="100" width="100" height="100"></rect>
<rect x="100" y="100" width="100" height="100" rx="10" ry="10"></rect>
cricle
cricle可以用来绘制一个圆, 默认填充色为黑色
| 属性 | 说明 |
|---|---|
| r | 圆的半径 |
| cx | 圆心的 x轴位置 |
| cy | 圆心的 y轴位置 |
<circle cx="100" cy="100" r="50" fill="red"></circle>
ellipse
ellipse可以用来绘制一个椭圆, 默认填充色为黑色
| 属性 | 说明 |
|---|---|
| cx | 椭圆中心的 x轴位置 |
| cy | 椭圆中心的 y轴位置 |
| rx | 椭圆的 x轴半径 |
| ry | 椭圆的 y轴半径 |
<ellipse cx="100" cy="100" rx="50" ry="100" />
line
line可以用于绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置
和Canvas线条一样需描边才能显示，不支持填充 --- line的默认描边色为透明色
| 属性 | 说明 |
|---|---|
| x1 | 起点的 x 轴位置 |
| y1 | 起点的 y 轴位置 |
| x2 | 终点的 x轴位置 |
| y2 | 终点的 y轴位置 |
<line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="5"></line>
polyline
polyline可以用于绘制折线 或者叫做 多段线
默认填充色为黑色
| 属性 | 说明 |
|---|---|
| points | 每个数字用空白、逗号或者换行符分隔开 每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标 为了提高可读性，推荐每2个数字直接使用逗号进行分割 |
<!-- 以下几种方式 来绘制折线 都是合法的 -->
<polyline points="100 100, 200 200, 100 200"></polyline>
<polyline points="100 100 200 200 100 200"></polyline>
<polyline points="100, 100, 200, 200, 100, 200"></polyline>
polyline并不会主动去闭合图形
<polyline points="100 100 200, 200 100 200" fill="transparent" stroke="red"></polyline>
polygon
polygon用于绘制多边形，polygon元素是和折线很像，它们都是由连接一组点集的直线构成
不同的是，polygon的路径在最后一个点处自动回到 第一个点
需要注意的是，矩形也是一种多边形，也可以用多边形创建一个矩形
polygon默认的填充色是黑色
| 属性 | 说明 |
|---|---|
| points | 每个数字用空白、逗号或者换行符分隔开 每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标 为了提高可读性，推荐每2个数字直接使用逗号进行 |
polygon会主动去闭合图形
<polygon points="100 100 200, 200 100 200" fill="transparent" stroke="red"></polygon>
path
path元素可能是 SVG 中最常⻅的形状
你可以用 path元素绘制矩形(直⻆矩形或圆⻆矩形)、圆形、椭圆、折线形、 多边形，以及一些其他的形状，例如⻉塞尔曲线、2 次曲线等曲线
默认会填充黑色，默认路径不会闭合
| 属性 | 说明 |
|---|---|
| d | 一个点集数列，以及其它关于如何绘制路径的信息，必须M命令开头 支持格式:“M 0 0, 1 1, 2 2”或“M0 0, 1 1, 2 2”或“M 0，0, 1，1, 2，2”或“M 0 0 1 1 2 2” |
path元素是 SVG基本形状中最强大的一个。 你可以用它创建线条，曲线，弧形等等
path 元素的形状是通过属性d定义的，属性d的值是一个 “命令 + 参数 ”的序列
每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点
在命令字母后面的，是你需要移动到的那个点的 x 和 y 轴坐标。比如移动到 (10,10) 这个点的命令，应该写成“M 10 10”命令
这一段字符结束 后，解析器就会去读下一段命令
每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对 定位(例如:从上一个点开始，向上移动 10px，向左移动 7px)
属性 d采用的是用户坐标系统，不需标明单位，默认单位是PX
| d支持的命令 | 说明 |
|---|---|
| M/m | MoveTo |
| L/l | Line To 可以省略 |
| Z/z | Close Path 可以省略 当省略的时候，路径不会自动闭合 当不省略的时候，路径会自动闭合 |
<!-- 等价于 <path d="M 0 0, L100 100, 0 100"></path> -->
<path d="M 0 0, 100 100, 0 100"></path>
<path d="M 100 100, 200 200, 100 200" fill="transparent" stroke="red"></path>
<path d="M 100 100, 200 200, 100 200 Z" fill="transparent" stroke="red"></path>
<path d="M 100 100,l 200 200,L 100 200 Z" fill="transparent" stroke="red"></path>
<!-- 当d以m开头的时候 默认后续省略的L都是小写的l -->
<path d="m 100 100,200 200,L 100 200 Z" fill="transparent" stroke="red"></path>
