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>
实现效果