svg入门详解（实例篇）

一、SVG形状

SVG有一些预定义的形状元素，可被开发者使用和操作：

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

二、基本形状

要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。

示例代码：

"250" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    "10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    "60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    "25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    "75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    "10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"  stroke="orange" fill="transparent" stroke-width="5"/>

    "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"  stroke="green" fill="transparent" stroke-width="5"/>

    "M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

三、坐标系统

SVG使用的坐标系统或者说网格系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

四、SVG实例

（一）矩形

示例代码及效果：