HTML5学习--SVG全攻略（基础篇） - 狙击手+(3)_H5之家

运行结果.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 的缩写，它允许对诸如滤镜等特殊元素进行定义。

运行结果.png

代码解释：

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

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