HTML5学习--SVG全攻略（基础篇）

明天高级篇

一.什么是SVG？

SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形，使用 XML 格式定义图形。SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体。 2003 年一月，SVG 1.1 被确立为 W3C 标准。与其余图像格式相比，使用 SVG 的优点有如下几点：

1.SVG 可被很是多的工具读取和修改（好比记事本） 2.SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 3.SVG 是可伸缩的 4.SVG 图像可在任何的分辨率下被高质量地打印 5.SVG 可在图像质量不降低的状况下被放大 6.SVG 图像中的文本是可选的，同时也是可搜索的（很适合制做地图） 7.SVG 能够与 Java 技术一块儿运行 8.SVG 是开放的标准 9.SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash,与 Flash 相比，SVG 最大的优点是与其余标准（好比 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

 

学习过程当中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，咱们一块儿学前端！

二.SVG 实例

下面的例子是一个简单的 SVG 文件的例子。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"> <circle cx="200" cy="100" r="50" stroke="red" stroke-width="2" fill="green"/> </svg>

运行结果

代码解释：
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是不是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。第二引用了这个外部的 SVG DTD。该 DTD于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd 该 DTD 位于 W3C，含有全部容许的 SVG 元素。

1.SVG 代码以 < svg > 元素开始，包括开启标签 < svg > 和关闭标签 < /svg > ，这是根元素。
2.width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
3.SVG 的 < circle > 用来建立一个圆，cx 和 cy 属性定义圆中心的 x 和 y 坐标。若是忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
4.stroke 和 stroke-width 属性控制如何显示形状的轮廓。咱们把圆的轮廓设置为 2px 宽，红色边框。
5.fill 属性设置形状内的颜色。咱们把填充颜色设置为原谅色。
关闭标签的做用是关闭 SVG 元素和文档自己。
注意：全部的开启标签必须有关闭标签！

HTML 页面中的 SVG
SVG 文件可经过如下标签嵌入 HTML 文档：< embed > 、< object > 或者 < iframe >。

三种把 SVG 文件嵌入 HTML 页面的不一样方法。

使用 < embed > 标签

< embed > 标签被全部主流的浏览器支持，并容许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer 推荐的方法！然而，若是须要建立合法的 XHTML，就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。
语法：

< src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

注释：pluginspage 属性指向下载插件的 URL。

使用 < object > 标签

< object > 标签是 HTML 4 的标准标签，被全部较新的浏览器支持。它的缺点是不容许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 < object > 标签时 SVG 文件没法工做（至少不能在 IE 中工做）！

语法：

<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase 属性指向下载插件的 URL。

使用 < iframe > 标签

< iframe > 标签可工做在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100"></iframe>

三.SVG 各形状介绍

（一）SVG 矩形
能根据以前的圆形联想到，rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就能够控制它在屏幕上的位置和形状。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="10" ry="10" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9"/> </svg>

运行结果.png

代码解释：

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1
CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
rx 和 ry 属性可以使矩形产生圆角。

（二）SVG 圆形：详细见上svg实例

（三）SVG椭圆：
ellipse 标签可用来建立椭圆。椭圆与圆很类似。不一样之处在于椭圆有不一样的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="275" cy="125" rx="100" ry="50" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/> </svg>

运行结果.png

代码解释：

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

（四）SVG线条
line 标签用来建立线条

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg>

运行结果.png

代码解释：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

（五）SVG多边形
polygon 标签用来建立含有很多于三个边的图形。它们都是由链接一组点集的直线构成。polygon的路径在最后一个点处自动回到第一个点。须要注意的是，矩形也是一种多边形，若是须要更多灵活性的话，你也能够用多边形建立一个矩形。

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

运行结果.png

代码解释：

points 属性定义多边形每一个角的 x 和 y 坐标
点集数列。每一个数字用空白符、逗号、终止命令或者换行符分隔开。每一个点必须包含2个数字，一个是x坐标，一个是y坐标。因此点列表 (0,0), (1,1) 和(2,2)能够写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，因此最终的直线将从位置(2,2)链接到位置(0,0)。

（六）SVG 折线
polyline 标签用来建立仅包含直线的形状。它是一组链接在一块儿的直线。由于它能够有不少的点，折线的的全部点位置都放在一个points属性中：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="20,100 40,60 70,80 100,20" style="fill:white;stroke:red;stroke-width:2"></polyline> </svg>

运行结果.png

points
点集数列。每一个数字用空白符、逗号、终止命令或者换行符分隔开。每一个点必须包含2个数字，一个是x坐标，一个是y坐标。因此点列表 (0,0), (1,1) 和(2,2)能够写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，因此最终的直线将从位置(2,2)链接到位置(0,0)。

四.SVG 滤镜简介

　全部互联网的SVG滤镜定义在 < defs > 元素中， < filter > 标签用来定义SVG滤镜， < filter > 标签使用必须的ID属性来定义向图形应用到那个滤镜中。在 SVG 中，可用的滤镜有：

feBlend SVG 滤镜。使用不一样的混合模式把两个对象合成在一块儿。
feColorMatrix SVG 滤镜。应用matrix转换。 feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。 feComposite SVG 滤镜。 feConvolveMatrix SVG 滤镜。 feDiffuseLighting SVG 滤镜。 feDisplacementMap SVG 滤镜。 feDistantLight SVG 滤镜。 Defines a light source feFlood SVG 滤镜。 feGaussianBlur SVG 滤镜。对图像执行高斯模糊。 feImage SVG 滤镜。 feMerge SVG 滤镜。建立累积而上的图像。 feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。 feOffset SVG 滤镜。相对与图形的当前位置来移动图像。 fePointLight SVG 滤镜。 feSpecularLighting SVG 滤镜。 feSpotLight SVG 滤镜。 feTile SVG 滤镜。 feTurbulence SVG 滤镜。

注释：您能够在每一个 SVG 元素上使用多个滤。

（一）SVG 高斯滤镜
< filter > 标签必须嵌套在 < defs > 标签内。< defs > 标签是 definitions 的缩写，它容许对诸如滤镜等特殊元素进行定义。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <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)"/> </svg>

运行结果.png

代码解释：

< filter > 标签的 id 属性可为滤镜定义一个惟一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素连接到滤镜。当连接滤镜 id 时，必须使用 # 字符
滤镜效果是经过 < feGaussianBlur > 标签进行定义的。fe 后缀可用于全部的滤镜
< feGaussianBlur > 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像建立效果。

（二）SVG 阴影效果
feOffset 元素用于建立阴影效果
偏移一个矩形（带 < feOffset > ），而后混合偏移图像顶部(含 < feBlend > )
SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>

运行结果.png

代码解释：
< filter > 标签的 id 属性可为滤镜定义一个惟一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素连接到滤镜。当连接滤镜 id 时，必须使用 # 字符

（三）SVG 线性渐变
　渐变是一种从一种颜色到另外一种颜色的平滑过渡。另外，能够把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

线性渐变
放射性渐变
< linearGradient > 可用来定义 SVG 的线性渐变。

< linearGradient > 标签必须嵌套在 < defs > 的内部。< defs > 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

线性渐变可被定义为水平、垂直或角形的渐变：

当 y1 和 y2 相等，而 x1 和 x2 不一样时，可建立水平渐变
当 x1 和 x2 相等，而 y1 和 y2 不一样时，可建立垂直渐变
当 x1 和 x2 不一样，且 y1 和 y2 不一样时，可建立角形渐变

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <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)"/> </svg>

运行结果.png

代码解释：
1.< linearGradient > 标签的 id 属性可为渐变定义一个惟一的名称。
2.fill:url(#orange-red) 属性把 ellipse 元素连接到此渐变。
3.< linearGradient > 标签的 x一、x二、y一、y2 属性可定义渐变的开始和结束位置。
4.渐变的颜色范围可由两种或多种颜色组成。每种颜色经过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。

（四）SVG 放射渐变
< radialGradient > 用来定义放射性渐变。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <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)"/> </svg>

运行结果.png

代码解释：
　　< radialGradient > 标签的 id 属性可为渐变定义一个惟一的名称，fill:url(#grey-blue) 属性把 ellipse 元素连接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色经过一个 < stop > 标签来规定。offset 属性用来定义渐变的开始和结束位置。

 

学习过程当中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群343599877，咱们一块儿学前端！