SVG学习

svg

svg，可缩放矢量图形（Scalable Vector Graphic）。是用于描述二维矢量图形的一种图形格式。矢量图形与分辨率无关，这意味着对矢量图进行缩小放大后不会发生失真。矢量图占用空间较小，矢量图可以轻松转换为位图（位图不能轻易转化为矢量图）。

svg的图形元素

SVG中预定义的有几种常用的形状元素，分别为：线段<line>、折线<polyline>、矩形<rect>、圆形<circle>、椭圆形<ellipse>、多边形<polygon>、路径<path>。
下面介绍这些元素的参数以及示例：

1.线段

线段的参数为该线段的起点（x1,y1）与终点(x2,y2)：
根据起点与终点坐标绘制线段：

<line x1="55" y1="55" x2="255" y2="255"
		 style="stroke: black; stroke-width: 1">
</line>

如图：

2.矩形

矩形有六个参数。其中包括四个必备参数：矩形左上角坐标<x,y>，矩形的宽度width，矩形的高度height。两个可选参数来绘制圆角矩阵：椭圆在x方向的半径rx，椭圆在y方向的半径ry。
示例如下：

		//绘制矩阵
		<rect x="10" y="10" height="50" width="50" 
				style="stroke: black; stroke-width: 1; fill: #0e84b5">
		</rect>
		//绘制圆角矩阵
        <rect x="80" y="10" height="50" width="50" rx="5" ry="5" 
        		style="stroke: black; stroke-width: 1; fill: #0000FF">
        </rect>

如图：

3.折线与多边形

折线与多边形的参数一致，都是一个point参数，代表一系列点坐标。不同的是多边形会将起点与终点相连，折线不会。
示例如下：

		//绘制折线
        <polyline points="50,50 20,100 80,100 " 
        		style="fill: white; stroke: black; stroke-width: 1">
        </polyline>
        //绘制多边形
        <polygon points="150,50 120,100 180,100 " 
        		style="fill: blue; stroke: black; stroke-width: 1">
        </polygon>

如图：

4.圆形与椭圆形

圆形有三个参数：圆心坐标<cx,cy>，圆的半径r。
椭圆形有四个坐标：圆心坐标<cx,cy>，椭圆的水平半径rx，椭圆的垂直半径ry。
示例如下：

		//绘制圆形
        <circle r="10" cx="50" cy="80" 
        		style="fill: #0000FF;stroke-width: 1; stroke: black">
        </circle