使用SVG繪制圖形是非常簡單的，SVG內(nèi)置6個基本圖形，和4個基本屬性
<circle>
<ellipse>
<line>
<rect>
<polyline>
<polygon>
fill 填充顏色
stroke 描邊顏色
stroke-width 描邊粗細
transform 變換
<circle>是最簡單的，你可以用它來繪制一個圓
<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>
繪制一個圓形，只需要一個圓心（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> 兩點確定一條直線
<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）相對左邊，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個點組成，其實就是一個點集，格式為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>意為多邊形，和折線差不多，其實也是一個點集，但polygon要求圖形閉合，即開始點和結(jié)束點要相連，格式同位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>
