svg滤镜之高斯滤镜、径向渐变

SVG阅读器处理一个图形对象时，会将对象呈现在位图输出设备上，它可以将对象的描述信息转化为一组对应的像素。在使用滤镜时，SVG阅读器不会直接将图形渲染为最终结果，而是先将像素保存到临时位图中，然后将滤镜指定的操作应用到该临时位图，其结果作为最终图形。

在SVG中，使用

filter元素指定一组操作(也叫基元),

在渲染图形对象时，将该操作应用在最终图形上。

filter标记之间就是我们想要的滤镜基元，每个基元有一个或多个输入，但是只有一个输出，

输入可以是原始图形(SourceGraphic)、图形的阿尔法通道(不透明度，SourceAlpha)或者是前一个滤镜基元的输出

。

filter元素有一些属性用来描述该滤镜的裁剪区域。通过

x,y,width,height

属性定义一个滤镜范围，这些属性默认情况是按照对象的边界框计算的，即

filterUnits

属性的默认值为

objectBoundingBox

,如果要按照用户单位制定边界，则需要设置该属性值为

userSpaceOnUse

。

还可以用

primitiveUnits

属性为基元操作指定单位，默认值为

userSpaceOnUse

,如果设置为

objectBoundingBox

则会按照图形尺寸的百分比来表示单位。

feMerge

基元包裹一个

feMergeNode

元素列表,每个元素都指定一个输入。这些输入按照出现的顺序叠加。

<defs>
	<filter id="filter_red" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
			<feColorMatrix result="offsetblur" in="offOut" type="matrix" />
			<!-- <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> -->
			<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur" />
			<feOffset in="blur" dx="0" dy="0" result="offsetBlur" stdDeviation="2" />
			<feFlood flood-color="red" flood-opacity="5" result="offsetColor" /> 
			//该滤镜用flood-color (en-US)元素定义的颜色和flood-opacity (en-US)元素定义的不透明度填充了滤镜子区域
			<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
			//滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下Porter-Duff合成操作之一：over、in、atop、xor。
			<feMerge>
				<feMergeNode />  //高斯模糊
				<feMergeNode in="SourceGraphic" />  //原始图形
			</feMerge>
	</filter>
	<radialGradient id='fill_red' cx='50%' cy='50%'>
			<stop offset='0%' style='stop-color:white'></stop>
			<stop offset='70%' style='stop-color:red'></stop>
	</radialGradient>
</defs>
<circle id='pilot_lamp' cx='300' cy='400' r='5' style='fill:url(#fill_red);filter:url(#filter_red)'></circle>
           

实现效果