200202.md

svg: 基本图形

1. svg: 直线（line）
2. svg: 矩形（rect）
3. svg: 圆形（circle）和 椭圆（ellipse）
4. svg: 多边形（polygon）
5. svg: 折线（polyline）

one：直线

两点确立一条直线，所以 svg 画直线为：

line x1="10" y1="10" x2="100" y2="10" style="stroke: #f00; stroke-width: 5px;

demo

svg: 画直线

---

two: 矩形

左上角位置加长宽可以画出矩形

rect x="10" y="10" width="100px" height="100px" style="stroke: #f00; stroke-width: 2px; fill:none;

x，y 为矩形左上角位置，width: 宽 height： 高

demo

svg: 画矩形

---

three: 圆形

1. 圆中心位置加半径可以画出圆形。

circle cx="100px" cy="100px" r="50" style="stroke: #f00; stroke-width: 2px; fill:none;

2. 圆中心位置加两个不相等的半径可以画出椭圆

ellipse cx="100px" cy="100px" rx="50" ry="25" style="stroke: #f00; stroke-width: 2px; fill:none;

cx，cy 为圆心位置，r为半径，rx为x轴半径，ry为y轴半径

demo

svg: 画矩形

---

four: 多边形

多个点（三个点及以上）并且闭合来确认多边形

polygon points="15,30 55,30 45,20 5,20" style="fill: none; stroke: #f00; stroke-width: 1px"

points 为多个点的位置 以空格隔开

demo

svg: 画多边形

---

five: 折线

多个点且不闭合确认折线

polyline points="15,30 55,30 45,20 5,20" style="fill: none; stroke: #f00; stroke-width: 1px"

points 为多个点的位置 以空格隔开

demo

svg: 画折线