一、基本圖形標籤、通用屬性
- 有6種基本的圖形
<!-- 矩形 -->
<rect> </rect>
<!-- 圓形-->
<circle> </circle>
<!-- 橢圓形-->
<ellipse> </ellipse>
<!-- 直線（數學上的線段） -->
<line> </line>
<!-- 多線段 -->
<polyline> </polyline>
<!-- 多邊形） -->
<polygon> </polygon>- 還有一些通用的屬性，比如
fill（填充）、stroke（邊框）、transform（變換）
（ transform就是 css3 中的用法 ）
然後一起學習下各個圖形的屬性用法
二、矩形（rect）
重要的是，在svg座標系中，x軸正方向 向右 ，y軸正方向 向下
- x：距離父級座標系的
橫向座標值（座標系的概念後面會提到，先記住父級） - y：距離父級座標系的
縱向座標值 - width：矩形
寬度 - height：矩形
高度 - rx：
橫向的圓角值 - ry：
縱向的圓角值
上例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
三、圓形（circle）
- cx：
圓心距離父級座標系的橫向座標值 - cy：
圓心距離父級座標系的縱向座標值 - r：
半徑
上例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
四、橢圓（ellipse）
- cx：
圓心距離父級座標系的橫向座標值 - cy：
圓心距離父級座標系的縱向座標值 - rx：
水平半徑 - ry：
垂直半徑
上例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="150" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
五、直線（line）
這個定義就很簡單了，數學上兩個點的座標
- x1：
第一個點距離父級座標系的橫向座標值 - y1：
第一個點距離父級座標系的縱向座標值 - x2：
第二個點距離父級座標系的橫向座標值 - y2：
第二個點距離父級座標系的縱向座標值
上例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
六、多線段（polyline）
points ：多個座標點的位置集合，傻瓜式寫座標就行，以此類推
- x1：
第一個點距離父級座標系的橫向座標值 - y1：
第一個點距離父級座標系的縱向座標值 - x2：
第二個點距離父級座標系的橫向座標值 - y2：
第二個點距離父級座標系的縱向座標值
... ... ...
上例子：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
七、多邊形（polygon）
points ：與多線段類似，區別是 最後一個點 會和 第一個點 連起來，形成封閉圖形
- x1：
第一個點距離父級座標系的橫向座標值 - y1：
第一個點距離父級座標系的縱向座標值 - x2：
第二個點距離父級座標系的橫向座標值 - y2：
第二個點距離父級座標系的縱向座標值
... ... ...
上例子：
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>