SVG基础用法

一、简介

SVG是使用XML来描述二维图形和绘图的程序语言，2003年1月14成为W3C推荐标准；
特性：
1、是一种可伸缩矢量图形
2、是使用xml格式定义用于网络的基于矢量的图形
3、放大或改变图片的尺寸其质量不会有所损失
4、SVG文件必须使用.svg后缀来保存

SVG图形的创建（分两种方式）

html中直接创建：
	<svg width="" height="" version="1.1" 
	xmlns="http://www.w3.org/2000/svg">
		// 插入需要的图形
	</svg>
	
外部创建(这种需要在文件中进行说明文件类型)：
	<?xml version="1.0" standalone="no">
	<!DOCtype svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg width="100%" height="100%" version="1.1"
	xmlns="http://www.w3.org/2000/svg">
		// 插入需要的图片
	</svg>

SVG文件可通过一下标签嵌入HTML(外部的引入的.svg文件方式)：

<embed>案例:
	<embed src="rect.svg" width="300" height="100" type="image/svg+xml"
		pluginspage="http://wwwadobe.com/svg/viewer/install/" />
		
<object>案例：
	<object data="rect.svg" width="300" height="100" 	
	type="image/svg+xml"
	codebase="http://www.adobe.com/svg/viewer/install/" />

<iframe>案例：
	<iframe src="rect.svg" wodth="300" height="100"></iframe>

二、创建SVG图形

所创建的元素都要放在svg元素中才会生效
一、矩形（<rect>标签）

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
	<rect width="30" height="40" x="20" y="20"
    style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)" />
</svg>
注解：
	rect属性：
		x: 定义矩形左侧位置
		y: 定义矩形顶端位置
		width: 定义矩形宽度
		height: 定义矩形高度
		style: 设置矩形样式

***style样式包含（svg形状通用）：
fill: 定义矩形填充颜色
stroke-width: 定义矩形边框宽度
stroke: 定义矩形边框的颜色
fill-opcity: 定义填充颜色透明度
stroke-opacity: 定义边框颜色的透明度
opcity: 定义图形全部的透明度

二、圆形（<circle>标签）

<circle cx="50" cy="50" r="20" stroke="black" stroke-width="2" 
fill="red">
注解：
	cx和cy属性定义圆形的x和y坐标
	stroke: 定义黑色圆背景
	stroke-width: 定义圆边框宽度
	fill: 定义边框颜色

三、椭圆（<ellipse>标签）

<ellipse cx="200" ct="150px"
style="fill:rgb(200, 100, 50); stroke:rgb(0,0,100); stroke-width:2;">

注解：
	cx: 圆点的x坐标
	cy: 圆点的y坐标
	rx: 水平半径
	ry: 垂直半径

四、线条（<line> 标签）

<line x1="0" y1="0" x2="300" y2="300" style="stroke: rgb(99,99,99); stroke-width:2" />

x1, y1线条开始的位置；x2, y2线条结束的位置

五、多边形（<polygon> 标签）

<polygon points="220,100 300,210 170,250" style="fill: #ccc; stroke: #000; stroke-width:1" />

注解：points属性定义多边形每个角的x 和 y 坐标

六、折线（<polyline>标签）

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" 
style="fill:white; stroke:red; stroke-width: 2" />

注解： points属性定义折现每个拐角的 x 和 y 坐标

七、路径（<path> 标签）

<path d="M250 150 L150 350 L350 350 Z" />

路径数据：
	M = moveto(开始描点)
	L = lineto(画线要到的位置)
	H = horizontal lineto(水平画线要到的位置)
	V = vertical lineto(垂直画线要到的位置)
	C = curveto(弯曲线弯角位置，包含多个坐标)
	S = smooth curveto(光滑曲线曲角位置，包含多个坐标)
	Q = quadratic Belzier curve(二次 Belzier曲线)
	T = smooth quadratic Belzier curveto(光滑二次Belzier曲线)
	A = elliptical Arc(椭圆弧)
	Z = closepath(关闭路径)

三、 渐变

SVG渐变必须在 标签中进行定义，渐变类型包括：线性渐变 和 放射性渐变
: 他可对诸如渐变之类的特殊元素进行定义

线性渐变（<linearGradient>标签）：
1、水平渐变：y1 = y2, x1 != x2
2、垂直渐变：x1 =x2, y1 != y2
3、角形渐变：x1 != x2, y1 != y2

// 定义
<defs>
	<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
		<stop offset="0%"
		style="stop-color:rgb(255,255,0); stop-opacity: 1" />
		<stop offset="100%"
		style="stop-color:rgb(255,0,0); stop-opacity: 1" />
	</linearGradient>
</defs>
// 应用
<ellipse cx="200" cy="190" rx="85" ry="50" style="fill: url(#orange_red)" /> 

注解：
1、fill:url(#orange_red) 属性把ellipse元素链接到此渐变
2、标签的x1,x2,y1,y2属性定义渐变的开始和结束位置
3、 标签定义渐变颜色的组成部分，offset属性来定义渐变的开始和结束位置

放射性渐变（<radialGradient>标签）：

// 定义
<defs>
	<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
	fx="50%" fy="50%">
		<stop offset="0%"
			style="stop-color: rgb(200,200,200); stop-opacity:0">
		<stop offset="100%"
			style="stop-color: rgb(0,0,255); stop-opacity: 1">
	</radialGradient>
</defs>
//用应
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

注解：
1、cx,cy属性定义外圆
2、fx,fy属性定义内圆

滤镜

fe开头的元素都是滤镜，如下高斯模糊：
高斯模糊（<feGaussianBlur>标签）

// 定义
<defs>
	<filter id="Gaussian_Blur">
		<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
	</filter>
</defs>
// 应用
<ellipse cx="200" cy="150" rx="70" ry="40"
	style="fill: #ff00; stroke: #0000; stroke-width: 2;
	filter: url(#Gaussian_Blur)"
/>

注解：
1、filter:url属性用来把元素链接到滤镜
2、stdDeviation：属性用于定义模糊程度
3、in=“SourceGraphic” 定义有整个图像创建效果

容器中常用元素

指在svg中经常使用的一些标签元素：

defs: 用来存储后续将要用到的图像，通过fill:url(id)进行引用
g: 用于对其他SVG元素进行分组容器，在其元素上设置属性和变换会影响g分组的所有元素
mask: 用于定义一个alpha通道，将当前对象合成到背景中
pattern: 定义一个填充对象，这个对象可在其寄宿元素内重复、平铺以沾满其元素
marker: 用于在给定的<path>、<line>、<polyline>或<polygon>元素上绘制箭头或多点标记的图形
symbol:定义一个模板元素,通过use属性引用