# 常用的形状
## circle
```html
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50" />
</svg>
```
通过cx和cy确定圆心位置，r确定半径。由于没有给定stroke和fill所以默认的边线和内部色都是黑色。
## ellipse
```html
<svg viewBox="0 0 400 400" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
```
cx cy属性定义圆点的 xy 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
结果图为：
## line
```html
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
```
x1 y1属性定义线条起点位置xy坐标
x2 y2属性定义线条终点位置xy坐标
结果图为：
## polygon
```html
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
```
points属性定义多边形的顶点位置x,y 形式的序列，线条跟随位置绘制。
(PS：使用较少，可以常直接使用path)
## polyline
和polygon相似，形成一个起点和终点不闭合的线条。
## rect
```html
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
```
x y属性定义矩形的的左上角xy 坐标
width属性定义矩形的宽
height属性定义矩形的高
## path
``` html
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
```
d属性描述路径
下面的命令可用于路径数据：
- M = moveto 移动到
- L = lineto 绘制线到
- H = horizontal lineto 垂直绘制线条到
- V = vertical lineto 水平绘制到
- C = curveto 曲线绘制到
- S = smooth curveto 光滑曲线
- Q = quadratic Bézier curve 二次贝塞尔曲线
- T = smooth quadratic Bézier curveto curve 光滑二次贝塞尔曲线
- A = elliptical Arc 椭圆弧
- Z = closepath 闭合(将起点与终点连接)
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
### text
```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
```
绘制文字 I love SVG
### title
实现 tooltip 功能的简单问题提示。适用简单展示，复杂展示可以使用div代替。
* * * * *
