基本形状
SVG 有一些预定义的形状元素，可被开发者使用和操作：
1.矩形
<rect> 标签，使用x,y,width,height表示一个矩形
- x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度
| 特性 | 说明 |
|---|---|
| fill | 填充颜色 |
| fill-opacity | 填充不透明度 |
| stroke | 边框颜色 |
| stroke-width | 边框宽度，边框是骑在矩形边界上的，一半在矩形外，一半在矩形内 |
| rx/ry | 圆角矩形，最大值为矩形宽/高的一半，如果只指定了一个，则认为两个都为相同的值 |
2.圆形
<circle> 标签可用来创建一个圆。
- cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)。
- r 属性定义圆的半径。
3.椭圆
<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。
- cx 属性定义圆点的 x 坐标
- cy 属性定义圆点的 y 坐标
- rx 属性定义水平半径
- ry 属性定义垂直半径
| 特性 | 说明 |
|---|---|
| fill | 填充颜色 |
| fill-opacity | 填充不透明度 |
| stroke | 边框颜色 |
| stroke-width | 边框宽度，边框是骑在圆的边界上的，一半在圆/椭圆外，一半在圆/椭圆内 |
4.线
<line> 标签用来创建线条。
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
| 特性 | 说明 |
|---|---|
| stroke-width | 笔画宽度，坐标网格线位于笔画的正中间，可以使用css的shape-rendering值来控制反锯齿特性 |
| stroke | 笔画颜色 |
| stroke-opacity | 线条的不透明度 |
| stroke-dasharray | 虚线，由一系列数字组成，数字个数为偶数(负责会自动重复一遍使其为偶数),表示线长-间隙-线长-间隙... |
5.折线
<polyline> 标签用来创建仅包含直线的形状。
- 使用points属性指定一系列点，不自动封闭图形
6.多边形
<polygon> 标签用来创建含有不少于三个边的图形。
- 由points属性指定的一系列坐标点界定，会自动封闭
| 特性 | 说明 |
|---|---|
| fill | 填充颜色 |
| fill-opacity | 填充不透明度 |
| stroke | 边框颜色 |
| stroke-width | 边框宽度 |
| fill-rule | 填充规则，如果多边形的边有交叉时，需要指定，可以取nozero(默认)和evenodd两个值。 |
fill-rule值为nonzero时的原理:判断一个点是在多边形内部还是外部时，从这个点画一条到无穷远的射线，然后数这个线和多边形的边有多少次交叉。如果交叉的边线是从右往左画，则总数加1，如果是从左往右则总数减1.如果最后总数为0则认为改点在图形外部，否则在内部。
fill-rule值为evenodd时只数射线与多边形边的交叉次数，如果为奇数则认为在多边形内部，否则认为在多边形外部。
7.路径
<path> 标签用来定义路径。可以通过制定一系列相互连接的线、弧、曲线来绘制任意形状的轮廓，这些轮廓也可以填充或者绘制轮廓线，也可以用来定义裁剪区域或蒙版。
| 命令 | 参数 | 说明 |
|---|---|---|
| M m | x y | 移动画笔到制定坐标（moveto） |
| L l | x y | 绘制一条到给定坐标的线（lineto） |
| H h | x | 绘制一条到给定x坐标的横线（horizontal lineto） |
| V v | y | 绘制一条到给定y坐标的垂线（vertical lineto） |
| A a | rx ry x-axis-rotation large-arc sweep x y | 圆弧曲线命令有7个参数，依次表示x方向半径、y方向半径、旋转角度、大圆标识、顺逆时针标识、目标点x、目标点y。大圆标识和顺逆时针以0和1表示。0表示小圆、逆时针（elliptical Arc） |
| Q q | x1 y1 x y | 绘制一条从当前点到x,y控制点为x1,y1的二次贝塞尔曲线（quadratic Belzier curve） |
| T t | x y | 绘制一条从当前点到x,y的光滑二次贝塞尔曲线，控制点为前一个Q命令的控制点的中心对称点，如果没有前一条则已当前点为控制点。（smooth quadratic Belzier curveto） |
| C c | x1 y1 x2 y2 x y | 绘制一条从当前点到x,y控制点为x1,y1 x2,y2的三次贝塞尔曲线（curveto） |
| S s | x2 y2 x y | 绘制一条从当前点到x,y的光滑三次贝塞尔曲线。第一个控制点为前一个C命令的第二个控制点的中心对称点，如果没有前一条曲线，则第一个控制点为当前的点。（smooth curveto） |
| Z z | (closepath) |
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
8.marker元素
marker元素用来在path上添加一个标记，比如箭头之类的。
- 首先需要定义好marker元素，然后在path中引用，一个marker标记是一个独立的图形，有自己的私有坐标。
<!---html-->
<defs>
<marker id="marker" markerWidth="10" markerHeight="10" refX="0" refY="4" orient="auto">
<path d="M 0 0 4 4 0 8" style="fill:none;stroke:black;"/>
</marker>
</defs>
<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
style="marker-start:url(#marker);marker-mid:url(#marker);marker-end:url(#marker);fill:none;stroke:black;"/>
/***css***/
path{
marker:url(#marker_id);
}
| marker属性 | 说明 |
|---|---|
| markerWidth | marker标记的宽度 |
| markerHeight | marker标记的高度 |
| refX refY | 指定marker中的哪个坐标与路径的开始坐标对齐 |
| orient | 自动旋转匹配路径的方向，需要设置为auto |
| markerUnits | 这个属性决定标记的坐标系统是否需要根据path的笔画宽度调整，如果设置为strokeWidth，则标记会自动调整大小。如果设置为useSpaceOnUse，则不会自动调整标记的大小。 |
| viewBox preserveAspectRatio | 设置标记的显示效果，比如可以将标记的(0,0)设置在标记网格中心 |
注释：如果id为marker_id的标记中也有path元素，则会出现自身无限引用自身的情况，因此需要说明marker中的path元素不需要添加标记
