SVG - 滤镜_SVG 菜鸟教程

SVG 使用 <filter> 元素来定义滤镜。<filter> 元素使用 id 属性来唯一标识它。滤镜在 <def> 元素中定义，然后由 graphics 元素通过其 ID 引用。

SVG 提供了一组丰富的滤镜。以下是常用滤镜的列表。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filter for drop shadows
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

语法声明

以下是 <filter> 元素的语法声明。我们只展示了主要属性。

<filter
	 	filterUnits="units to define filter effect region"
	 	primitiveUnits="units to define primitive filter subregion"
	 	
	 	x="x-axis co-ordinate"	
	 	y="y-axis co-ordinate" 	 		
	 	
	 	width="length"
	 	height="length"
	 	
	 	filterRes="numbers for filter region"
	 	xlink:href="reference to another filter" >
</filter>

属性

名称	描述
filterUnits	定义滤镜效果区域的单位。它指定滤镜中各种长度值的坐标系以及定义滤镜子区域的属性。如果 filterUnits=“userSpaceOnUse”，则值表示在使用 'filter' 元素时当前用户坐标系中的值。如果 filterUnits=“objectBoundingBox”，则值表示在使用 'filter' 元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。
primitiveUnits	用于定义滤镜效果区域的单位。它指定滤镜中各种长度值的坐标系以及定义滤镜子区域的属性。如果 filterUnits=“userSpaceOnUse”，则值表示在使用 'filter' 元素时当前用户坐标系中的值。如果 filterUnits=“objectBoundingBox”，则值表示在使用 'filter' 元素时引用元素上边界框的分数或百分比值。默认值为 userSpaceOnUse。
x	滤镜边界框的 x 轴坐标。Defeault 为 0。
y	滤镜边界框的 y 轴坐标。默认值为 0。
width	滤镜边界框的宽度。默认值为 0。
height	滤镜边界框的高度。默认值为 0。
filterRes	表示筛选区域的数字。
xlink:href	用于引用另一个滤镜。

例

<html>
	 	<title>SVG Filter</title>
	 	<body>
	 	
	 	 	 <svg width="800" height="200">
	 	 		
	 	 	 	 	<defs>
	 	 	 	 	 	 <filter id="filter1" x="0" y="0">
	 	 	 	 	 	 	 	<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
	 	 	 	 	 	 </filter>
	 	 	 	 	 		
	 	 	 	 	 	 <filter id="filter2" x="0" y="0" width="200%" height="200%">
	 	 	 	 	 	 	 	<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
	 	 	 	 	 	 	 	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
	 	 	 	 	 	 	 	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	 	 	 	 	 	 </filter>
	 	 	 	 	</defs>
	 	 	 	 	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="50" >使用滤镜（模糊效果）： </text>
	 	 	 	 	 	 <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
	 	 	 	 	 	 fill="green" filter="url(#filter1)" /> 	 	 	
	 	 	 	 	</g>	
	 	 	 	 	
	 	 	 </svg>
	 	
	 	</body>
</html>

两个 <filter> 元素定义为 filter1 和 filter2。
feGaussianBlur 滤镜效果使用 stdDeviation 定义具有模糊量的模糊效果。
in=“SourceGraphic” 定义效果适用于整个元素。
feOffset 滤镜效果用于创建阴影效果。in=“SourceAlpha” 定义该效果适用于 RGBA 图形的 Alpha 部分。
<rect> 元素使用 filter 属性链接滤镜。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

使用阴影效果进行滤镜

<html>
	 	<title>SVG Filter</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="200">
	 	 		
	 	 	 	 	<defs>
	 	 	 	 	 	 <filter id="filter1" x="0" y="0">
	 	 	 	 	 	 	 	<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
	 	 	 	 	 	 </filter>
	 	 	 	 	 		
	 	 	 	 	 	 <filter id="filter2" x="0" y="0" width="200%" height="200%">
	 	 	 	 	 	 	 	<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
	 	 	 	 	 	 	 	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
	 	 	 	 	 	 	 	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	 	 	 	 	 	 </filter>
	 	 	 	 	</defs>
	 	 	 	 	
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="50" >使用滤镜（阴影效果）: </text>
	 	 	 	 	 	 <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
	 	 	 	 	 	 fill="green" filter="url(#filter2)" />
	 	 	 	 	</g>
	 	 	 	 	
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 描边 SVG - 图案 >>