SVG 简单的图形绘制

使用SVG绘制图形是非常简单的，SVG内置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>的基础上增加了另外一条半径

<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要求图形闭合，即开始点和结束点要相连，格式同位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>