svg学习笔记(一)

svg学习笔记

SVG可缩放矢量图形是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格

基本图形

1.矩形

<svg>

<rect x="0" y="0" width="100" height="100" stroke="#0f0" stroke-width="5" fill="#f00"/>   // x,y表示矩形的起点，rx,ry表示矩形的圆角,stroke表示边框的颜色，stroke-width表示边框的大小，fill表示填充的颜色

</svg>

如图：

2.圆形

<svgwidth="200" height="200">

<circle cx="100" cy="100" r="100" stroke="#f00" />    // cx,cy表示圆心的位置，r表示圆的半径

</svg>

如图：

3.椭圆

<svg>

<ellipse cx="100" cy="100" rx="100" ry="50" fill="#fff" stroke="#f00"/>     // cx,cy表示圆心的位置，rx,ry表示横向竖向的半径

</svg>

如图：

4.直线

<svg>

<line x1="0" y1="0" x2="100" y2="100" stroke="#f00" stroke-width="5"/>      // x1,y1表示起点的位置，x2,y2表示终点的位置

</svg>

如图：

5.折线

<svg>

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2" />     //从x1,y1位置，经过x2,y2 ....到 xn,yn位置

</svg>

如图：

6.折线

<svg>

<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>     //从x1,y1位置，经过x2,y2 ....到 xn,yn位置

</svg>

如图：