使用SVG繪制圖形是非常簡(jiǎn)單的慷垮，SVG內(nèi)置6個(gè)基本圖形碴开，和4個(gè)基本屬性
<circle>
<ellipse>
<line>
<rect>
<polyline>
<polygon>
fill 填充顏色
stroke 描邊顏色
stroke-width 描邊粗細(xì)
transform 變換
<circle>是最簡(jiǎn)單的，你可以用它來(lái)繪制一個(gè)圓
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="150px" r="50px" fill="red"/>
</svg>
繪制一個(gè)圓形，只需要一個(gè)圓心（cx,cy）感帅，一條半徑（r）即可强饮。
<ellipse>僅僅是在<circle>的基礎(chǔ)上增加了另外一條半徑
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150px" cy="150px" rx="50px" ry="25px" fill="red"/>
</svg>
<line> 兩點(diǎn)確定一條直線
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300px" y2="300px" stroke="red"/>
</svg>
<rect>繪制矩形圆雁，偏移量（x,y）相對(duì)左邊傍妒，width，height描述高寬摸柄，（rx,ry）描述四角弧度。
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="30px" y="30px" width="100px" height="100px" rx="10px" ry="15px" fill="red">
</svg>
<polyline>很有趣既忆，意為折線驱负，n條折線嗦玖，由n-1個(gè)點(diǎn)組成，其實(shí)就是一個(gè)點(diǎn)集跃脊，格式為points="x1 y1 x2 y2..."
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0 0 30 30 60 0" stroke="red" fill="#fff"/>
</svg>
<polygon>意為多邊形宇挫，和折線差不多，其實(shí)也是一個(gè)點(diǎn)集酪术，但polygon要求圖形閉合器瘪，即開(kāi)始點(diǎn)和結(jié)束點(diǎn)要相連，格式同位points="x1 y1 x2 y2..."
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0 0 30 30 60 0 0" stroke="red" fill="#fff"/>
</svg>
