SVG概述
SVG : 可缩放矢量图形,使用 XML 格式定义图像。
SVG in HTML
- 直接嵌入HTML文档中
<body>
<svg width="100%" height="100%">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
</body>
- <embed>
被所有主流的浏览器支持，并允许使用脚本。
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.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" width="300" height="100">
</iframe>
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"\>
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
SVG形状
矩形 rect
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
- width 和 height 定义 宽高
- style 定义 CSS 属性
- fill 定义填充颜色（rgb 、颜色名或十六进制值）
- stroke-width 定义边框宽度
- stroke 定义边框颜色
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
- x 定义左侧位置
（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- y 定义顶端位置
（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px） - fill-opacity 定义填充颜色透明度
- stroke-opacity 定义笔触颜色透明度
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
- opacity 定义整个元素的透明值
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
- rx 和 ry 可使矩形产生圆角
圆形 circle
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
- cx 和 cy 定义圆点的 x 和 y 坐标。
如果省略 cx 和 cy，圆的中心为 (0, 0)
- r 定义圆的半径。
椭圆 ellipse
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
- cx 定义圆点的 x 坐标
- cy 定义圆点的 y 坐标
- rx 定义水平半径
- ry 定义垂直半径
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
线条 line
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
- x1 在 x 轴上线条的开始
- y1 在 y 轴上线条的开始
- x2 在 x 轴上线条的结束
- y2 在 y 轴上线条的结束
＃多边形 ploygon
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
- points 定义多边形每个角的 x 和 y 坐标
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
折线 ployline
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
路径 path
下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<path d="M250 150 L150 350 L350 350 Z" />
- 开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
SVG滤镜
在 SVG 中，可用的滤镜有：
feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePointLight feSpotLight
注释：您可以在每个 SVG 元素上使用多个滤镜！
SVG高斯模糊
- <filter> 用来定义 SVG 滤镜。
必需的 id 来定义向图形应用哪个滤镜
- <filter> 必须嵌套在 <defs> 标签内。
<defs> 是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
- <filter> 标签的 id 属性可为滤镜定义一个唯一的名称
（同一滤镜可被文档中的多个元素使用）
- filter:url 把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符,
滤镜效果是 <feGaussianBlur> 定义的。fe 后缀可用于所有的滤镜 - <feGaussianBlur> 的 stdDeviation 定义模糊的程度
in="SourceGraphic" 定义了由整个图像创建效果
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
SVG渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中，有两种主要的渐变类型：
- 线性渐变
- 放射性渐变
线性渐变 linearGradient
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 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="55"
style="fill:url(#orange_red)"/>
- <linearGradient> 必须嵌套在 <defs> 的内部
- <linearGradient> 的 id 为渐变定义一个唯一的名称
- fill:url(#orange_red) 把 ellipse 链接到此渐变
- <linearGradient> 的 x1、x2、y1、y2 可定义渐变的开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<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="55"
style="fill:url(#orange_red)"/>
放射性渐变 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)"/>
- <radialGradient> 的 id 可为渐变定义一个唯一的名称
- fill:url(#grey_blue) 把 ellipse 元素链接到此渐变
- cx、cy 和 r 定义外圈， fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
- 每种颜色通过一个 <stop> 标签来规定。
- offset 定义渐变的开始和结束位置。
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" 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)"/>
