SVG 2D入門10 - 濾鏡

時間 2019-11-12

標籤 svg 2d 入門简体版

原文原文鏈接

濾鏡稱得上是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特效完成，可是畢竟仍是不太方便。svg

filter元素與濾鏡效果區域
濾鏡效果區域指的是濾鏡效果起做用的區域。這個區域的大小是由filter元素下列的屬性定義的：
filterUnits = "userSpaceOnUse | objectBoundingBox"
這個屬性定義了x,y,width和height使用的座標空間。與其餘的Unit相關的屬性同樣，該屬性也是兩個值：userSpaceOnUse和objectBoundingBox(默認值)。
userSpaceOnUse表示使用引用該filter元素的元素的用戶座標系統。
objectBoundingBox表示使用引用該filter元素的元素的包圍盒的百分比作取值範圍。url

x,y,width,heightspa

這些屬性定義了濾鏡起做用的矩形區域。濾鏡效果不會應用在超過這個區域的點上。x,y的默認值是-10%，width與height的默認值是120%。code

filterResorm

該屬性定義了中間緩存區域的大小，因此也定義了緩存圖片的質量。一般狀況下，不須要提供這個值，瀏覽器本身會選取合適的值。一般，濾鏡效果區域應該定義成和背景正好能點和點一一對應，這樣會帶來必定的效率優點。xml

除了這些屬性，filter元素的下列屬性也很重要：
primitiveUnits = "userSpaceOnUse | objectBoundingBox"
這個屬性定義每一個原子操做中座標和長度使用的座標空間，這個屬性的取值仍是userSpaceOnUse和objectBoundingBox。只不過默認值是userSpaceOnUse。對象

xlink:href = "<iri>"
該屬性用於在當前filter元素中引用其餘的filter元素。blog

值得注意的是，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 [ <x> <y> <width> <height> ] | inherit"
      這個屬性只能用於容器元素，它定義瞭如何去截取背景截圖。
      new值表明：容許該容器的子元素訪問容器的背景截圖，而且該容器的子元素會渲染到背景中和設備上。
      accumulate是默認值，它的效果取決於上下文：若是父輩容器元素使用了enable-background：new的話，那麼該容器的全部圖形元素都會參與背景的渲染。不然，說明父輩容器沒有準備截取背景截圖，該元素的圖形元素顯示只顯示在設備上。
      下面的例子演示了這些取值的效果：

效果圖以下(第一排是最終效果圖，第二排是濾鏡效果)：

這個例子包含5個部分：
1.第一組中的圖片，沒用使用任何濾鏡效果。
2.第二組使用同樣的圖片，可是開啓了使用背景的效果。
3.第三組使用同樣的圖片，可是在內部的容器了使用了濾鏡效果。
4.第四組在內容容器的元素上使用了濾鏡效果。
5.最後一組使用了與第四組相同的濾鏡效果併合並源圖片後生成的效果。

濾鏡的概念其實很簡單，只不過是每一個效果的代碼看起來比較複雜，其實咱們試一下就很清楚了，不過因爲不一樣的瀏覽器對SVG的支持程度都不同，具體的效果仍是本身試試後再使用吧。

1. 突襲HTML5之SVG 2D入門10-3
2. 突襲HTML5之SVG 2D入門10-1
3. 突襲HTML5之SVG 2D入門10-2
4. 說說SVG的feTurbulence濾鏡
5. SVG 2D入門7 - 重用與引用
6. SVG入門
7. 突襲HTML5之SVG 2D入門1 - SVG綜述////////////////zzzzzzzz
8. 有意思！強大的 SVG 濾鏡
9. HTML5的SVG繪圖筆記6：濾鏡
10. SVG 入門及實踐
更多相關文章...
• SVG 濾鏡 - SVG 教程
• Memcached入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。