濾鏡稱得上是svg最強大的功能了，它允許你給圖形(圖形元素和容器元素)新增各種專業軟體中才有的濾鏡特效,喜歡特效的朋友可千萬不要錯過啊。希望本對你有所幫助。
濾鏡稱得上是svg最強大的功能了，它允許你給圖形(圖形元素和容器元素)新增各種專業軟體中才有的濾鏡特效。這樣你就很容易在客戶端生成和修改影象了。而且濾鏡並沒有破壞原有文件的結構，所以維護性也很好。
濾鏡用filter元素定義：需要使用的時候，在需要濾鏡效果的圖形或容器上新增filter屬性，引用相關濾鏡即可。
濾鏡元素包含很多的濾鏡原子操作；每個原子操作在傳入的物件上執行乙個基本的圖形操作，並產生圖形輸出。大多數的原子操作生成的結果基本都是乙個rgba。每個原子操作的輸入既可以是源圖形，也可以使其他原子操作的結果。所以引用濾鏡效果的過程就是在源圖形上應用相關的濾鏡原子操作，最後生成乙個新的圖形並渲染。
當在容器上(例如g元素)使用filter屬性的時候，濾鏡效果會應用到容器中的所有元素。但是容器中的元素並不會直接渲染到螢幕，而是會被暫時儲存起來。然後，圖形命令會被當做處理引用的filter元素的過程的一部分被執行，這個時候才會去渲染。這是通過使用sourcegraphic和sourcealpha來指定的。下面的第二個例子中的第三種情況會演示這種效果。
有些濾鏡效果會生成一些沒有定義的畫素點，這些點會被處理成透明效果。
先來看乙個例子：
複製**
**如下:
這個例子執行在firefox上的效果是最後一幅圖的結果：
注意：在其他的瀏覽器中可能會有一些不同。
這個濾鏡使用了6個效果，依次是(單步效果圖如上圖所示：)：
fegaussianblur：這一步是進行高斯模糊處理；該特效的輸入是源的透明度值，輸出存到了臨時緩衝blur中。blur值作為了下面feoffset和fespecularlighting的輸入。
feoffset：這一步是把平移一些位置；該特效的輸入是上一步中生成的blur，生成乙個新的快取offsetblur。
fespecularlighting：這一步是把的表面進行光線的處理。輸入是第一步中生成的blur，輸出存放到新的快取specout中。
兩次fecomposite：這兩步是對不同的快取層進行組合。
femerge：這一步是合併不同的層。該步通常是最後的一步，融合各個快取的層，生成最終的，並渲染呈現。雖然這一步也可以用多次fecomposite特效完成，但是畢竟還是不太方便。
filter元素與濾鏡效果區域
濾鏡效果區域指的是濾鏡效果起作用的區域。這個區域的大小是由filter元素下列的屬性定義的：
filterunits= "userspaceonuse | objectboundingbox"
這個屬性定義了x,y,width和height使用的座標空間。與其他的unit相關的屬性一樣，該屬性也是兩個值：userspaceonuse和objectboundingbox(預設值)。
userspaceonuse表示使用引用該filter元素的元素的使用者座標系統。
objectboundingbox表示使用引用該filter元素的元素的包圍盒的百分比做取值範圍。
x,y,width,height
這些屬性定義了濾鏡起作用的矩形區域。濾鏡效果不會應用在超過這個區域的點上。x,y的預設值是-10%，width與height的預設值是120%。
filterres
該屬性定義了中間快取區域的大小，所以也定義了快取的質量。通常情況下，不需要提供這個值，瀏覽器自己會選取合適的值。通常，濾鏡效果區域應該定義成和背景正好能點和點一一對應，這樣會帶來一定的效率優勢。
除了這些屬性，filter元素的下列屬性也很重要：
primitiveunits= "userspaceonuse | objectboundingbox"
這個屬性定義每個原子操作中座標和長度使用的座標空間，這個屬性的取值還是userspaceonuse和objectboundingbox。只不過預設值是userspaceonuse。
xlink:href= ""
該屬性用於在當前filter元素中引用其他的filter元素。
值得注意的是，filter元素只會繼承自己的父節點的屬性，並不會繼承引用該filter元素的元素的屬性。
濾鏡總覽
各種濾鏡原子操作就不詳述了，需要的時候檢視官方文件即可。下面看一下這些操作的共性。除了"in"屬性，下面的其他屬性是所有原子操作都可用的。
x,y,width,height
這幾個屬性不多說了，它定義了濾鏡原子起作用的區域，不妨成為"濾鏡子區域"吧。這幾個屬性是受filter元素的作用區域限制的，預設情況下，取值分別是0,0,100%,100%。這些原子的作用區域超過filter元素的作用區域都不起作用。
result
存放該步操作的結果。指定了result以後，同乙個filter元素的其他後續操作都可以用in來指定其為輸入。這個參看上面的例子就知道了。如果省略了這個值，則只能作為緊挨著的下一步操作的隱式輸入，注意如果緊挨著的下一步操作已經用in指定了輸入，則以in指定的為準。
in
表示該步操作的輸入。省略in屬性的話，將會預設使用前一步的結果作為本步的輸入，如果省略的是第一步的in，則會使用"sourcegraphic"作為值(參看下面的說明)。in屬性可以引用前面result存放的值，也可以指定下面6個特殊的值：
sourcegraphic：這個值代表使用當前的圖形元素作為操作的輸入。
sourcealpha：這個值代表使用當前圖形元素的alpha值作為操作的輸入。
backgroundimage：這個值代表使用當前的背景截圖作為操作的輸入。
backgroundalpha：這個值代表使用當前的背景截圖的alpha值作為操作的輸入。
fillpaint：這個值使用當前圖形元素的fill屬性的值作為操作的輸入。
strokepaint：這個值使用當前圖形元素的stroke屬性的值作為操作的輸入。
這些值中 backgroundimage和backgroundalpha可能比較難以理解，下面重點看看這兩個值。
訪問背景截圖
通常情況下，我們可以直接使用引用filter元素的元素的背景截圖作為filter效果的源。代表這種輸入的取值是backgroundimage和backgroundalpha，前乙個包含顏色和alpha值，後乙個只包含alpha值。為了支援這種使用方式，還需要在引用filter元素的元素上顯式的開啟這個特性，這需要設定元素的enable-background屬性。
enable-background= "accumulate | new [ ] | inherit"
這個屬性只能用於容器元素，它定義了如何去擷取背景截圖。
new值代表：允許該容器的子元素訪問容器的背景截圖，並且該容器的子元素會渲染到背景中和裝置上。
accumulate是預設值，它的效果取決於上下文：如果父輩容器元素使用了enable-background：new的話，那麼該容器的所有圖形元素都會參與背景的渲染。否則，說明父輩容器沒有準備擷取背景截圖，該元素的圖形元素顯示只顯示在裝置上。
下面的例子演示了這些取值的效果：
複製**
**如下:
效果圖如下(第一排是最終效果圖，第二排是濾鏡效果)：
這個例子包含5個部分：
1.第一組中的，沒用使用任何濾鏡效果。
2.第二組使用一樣的，但是開啟了使用背景的效果。
3.第三組使用一樣的，但是在內部的容器了使用了濾鏡效果。
4.第四組在內容容器的元素上使用了濾鏡效果。
5.最後一組使用了與第四組相同的濾鏡效果並合併源後生成的效果。
濾鏡的概念其實很簡單，只不過是每個效果的**看起來比較複雜，其實我們試一下就很清楚了，不過由於不同的瀏覽器對svg的支援程度都不一樣，具體的效果還是自己試試後再使用吧。
實用參考
指令碼索引：
開發中心：
熱門參考：
官方文件：
HTML5之SVG 2D入門4 筆畫與填充
前面我們重點都在總結各類形狀，文字和，接下來，我們還是和討論canvas一樣，總結一下顏色處理，也就是填充程式設計客棧和邊框效果 你會發現這裡的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式寫在元素中，也可以以css的形式儲存 這是與canvas不一樣的地方 填充色 fill屬性 這個...
HTML5之SVG詳解（一） 基本概括
自 1 背景 svg是scalable vector graphics的縮寫，意為可縮放向量圖形。1998年，全球資訊網聯盟成立了乙個工作組，研發一種通過xml來表現向量圖形的技術 svg！由於svg也是一種xml檔案，所以svg也繼承了xml的開放性 可移植性和互動性的優點。如今幾乎所有主流的瀏覽...
HTML 5標準學習入門之DOCTYPE
51cto推薦專題 html 5 下一代web開發標準詳解 所謂doctype，最初是xml的概念，即通過一種特定的語法，作為一種元資料，來描述xml文件中允許出現的元素，以及各元素的組成 巢狀規則等。具體的概念可以在wiki中中得到乙個更詳細的結果。但是在html中，doctype又有著一些不同的...