svg入门详解（实例篇）

1、SVG形状

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

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

2、基本形状

要想插入一个形状，你能够在文档中建立一个元素。不一样的元素对应着不一样的形状，而且使用不一样的属性来定义图形的大小和位置。

示例代码：

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

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

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
    <polyline points="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"/>

    <polygon points="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"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
复制代码

3、坐标系统

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

4、SVG实例

（一）矩形

示例代码及效果：

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="95" y="95" rx="20" ry="20" width="200" height="200" style="fill:rgb(99,99,99);stroke-width:2;stroke:rgb(33,33,33);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"></rect>
</svg>
复制代码

解析：
x     矩形左上角的x位置 y     矩形左上角的y位置 rx     圆角的x方位的半径 ry     圆角的y方位的半径 width     矩形的宽度 height     矩形的高度 fill     设置对象内部的填充颜色 fill-opacity     控制填充色的不透明度（范围：0 - 1） stroke     定义矩形边框的颜色 stroke-opacity     控制描边的不透明度（范围：0 - 1） stroke-width     定义矩形边框的宽度

（二）圆形

示例代码及效果：

<!--圆形--> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#FF8C00" />
</svg>
复制代码

解析： r     圆的半径 cx     圆点的x坐标 cy     圆点的y坐标

（三）椭圆

示例代码及效果：

<!--椭圆-->
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7D9EC0;stroke:#6B6B6B;stroke-width:2;"></ellipse>
</svg>
复制代码

解析： cx     椭圆中心的x坐标 cy     椭圆中心的y坐标 rx     定义的水平半径 ry     定义的垂直半径

（四）线条

绘制直线。它取两个点的位置做为属性，指定这条线的起点和终点位置。利用两点肯定一条直线的原理。

示例代码及效果：

<!--直线-->
<svg width="600px" height="600px"  version="1.1"  xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
    <line x1="100" y1="100" x2="0" y2="200" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
</svg>
复制代码

解析： x1     起点的x位置 y1     起点的y位置 x2     终点的x位置 y2     终点的y位置

（五）折线

是一组链接在一块儿的直线。由于它能够有不少的点，折线的的全部点位置都放在一个points属性中。

示例代码及效果：

<!--五星  未填充颜色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
<!--五星  填充颜色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:#EE2C2C;stroke:#EE2C2C;stroke-width:3" />
</svg>
</svg>
复制代码

解析： points     每一个点必须包含2个数字，一个是x坐标，一个是y坐标。因此点列表 (0,0), (1,1) 和(2,2)能够写成这样：“0 0, 1 1, 2 2”。

（六）多边形

和折线很像，它们都是由链接一组点集的直线构成。不一样的是， 的路径在最后一个点处自动回到第一个点。 标签用来建立含有很多于三个边的图形。 多边形是由直线组成，其形状是"封闭"的（全部的线条 链接起来）。

示例代码及效果：

<svg width="300px" height="300px" version="1.1"  xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>
复制代码

解析： points     每一个点必须包含2个数字，一个是x坐标，一个是y坐标。因此点列表 (0,0), (1,1) 和(2,2)能够写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，因此最终的直线将从位置(2,2)链接到位置(0,0)。

（七）路径

path元素是SVG基本形状中最强大的一个，它不只能建立其余基本形状，还能建立更多其余形状。你能够用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其余的形状，例如贝塞尔曲线、2次曲线等曲线。 path元素的形状是经过属性d来定义的，属性d的值是一个“命令+参数”的序列。

每个命令都用一个关键字母来表示，好比，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你须要移动到的那个点的x和y轴坐标。好比移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另外一种是用小写字母，表示采用相对定位

由于属性d采用的是用户坐标系统，因此不需标明单位

path的实例放到下篇...