滤镜

一、滤镜指令 filter

指令：filter()

参数：(fId, fecode)

语法：filter(fId, fecode) 或简写成 f(fId, fecode)

参数解释：

① fId - 必须，所创建滤镜 filter 元素的id标识符，字符型
② fecode - 必须，字符型，具体滤镜 HTML代码，例如 ：<feOffset in="SourceGraphic" dx="5" dy="5" />
* 具体滤镜代码建议使用反引号``包裹，这样代码可以分行书写、代码内的小角引号可以正常使用，详见后面的示例代码

二、使用滤镜指令 filterTo

指令：filterTo()

参数：id

语法：filterTo(fId) 或简写为 f2(fId)

参数解释：

fId 参数为事先使用 filter() 或 f() 指令创建的 filter 元素的id，必须，字符型
* filterTo() 或 f2() 意为为当前所创建的实体元素（例如rect、circle）等添加前面所创建的 id="fId" 的 filter 滤镜

下面举例说明：代码示例中，先创建 id="f1" 的 filter 滤镜，具体滤镜是 feColorMatrix，接着绘制两张图片来源一致的图片，第一张图片原始输出，第二张图片使用 f1 滤镜修饰，代码和效果如下——

//f('f1', `...`); //简写也可以
dr.filter('f1', `
	<feColorMatrix type="hueRotate" values="180" in="SourceGraphic" />
`);
dr.image('https://638183.freep.cn/638183/small/sunbirds.jpg')
dr.image('https://638183.freep.cn/638183/small/sunbirds.jpg', 160).filterTo('f1');
	

svgdr绘制指令生成的SVG代码：

feColorMatrix 滤镜使用矩阵原理对目标对象进行颜色转换，type 属性为转换类型，示例使用了业已存在的矩阵封装 hueRotate 即色相转换，可选值还有诸多个封装好的类型，另有一个自由度极高的 matrix 类型交由用户自己封装 4*5 的矩阵转换机制；values 属性指转换类型的值，示例中设为180，即将图像颜色体系每一个像素的色相通过矩阵运算都加上180度；in 属性是滤镜的作用对象，一般而言，常用到的值是 SourceGraphic（图像）或 SourceAlpha（alpha通道），示例使用前者，表示直接作用于目标图像即后面用 image() 指令绘制的第二张图片。更多的 feColorMatrix 滤镜知识可自行查阅。

svg滤镜数量并不太多，可用的滤镜加起来也就是二、三十个，常用的十来个。不过svg滤镜有一定的学习难度，掌握他们需要较多的学习成本，感兴趣的朋友可以量体裁衣，通过 简单教程·svg滤镜 或其他资源逐一了解学习。以下是较为常见的20个svg滤镜：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feDropShadow
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

svgdr 没有封装创建具体滤镜 fe* 的指令，但可以使用 draw() 指令先创建 filter，再创建 fe* 滤镜并添加到 filter 中。下面以创建文本阴影为例加以说明：/p>

dr.draw('filter', {id: 'f2'}); //创建 id="f2" 的filter标签
//创建 feDropShadow 滤镜
dr.draw('feDropShadow', {
	dx: 2,
	dy: 2,
	stdDeviation: 4,
	'flood-color': '#000',
	'flood-opacity': .75
}).addTo('f2');
//绘制文本并应用 id="f2" 的滤镜
dr.text('Hello', 50, 120, 'red').style('font: bold 100px Arial, sans-serif').f2('f2');
	

效果如下：

上述效果的SVG代码：

返回目录