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>
           

實作效果