# 常用的形狀
## 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代替。
* * * * *
