SVG <filter> 濾鏡

admin發表於2019-05-01
SVGFilter

濾鏡是SVG中最強大的功能之一，css3中也是如此，不借助專業的圖形軟體就可以繪製出強大的效果。

<filter>元素包含很多濾鏡基元操作，每個基元操作在傳入的物件上執行一個基本的圖形操作，併產生圖形輸出。

大多數的基元操作生成的結果基本都是RGBA圖片，總體來講，<filter>作用就是對引用它的圖形元素或者容器元素進行一系列的操作，產生一個新的圖形來替代原來的圖形。

一.<filter>元素：

使用<filter>可以定義一個濾鏡，看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      x="0" y="0"
      width="1" height="1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
  <rect
    x="20" y="20"
    width="90" height="90"
    fill="blue"
    filter="url(#ant)"/>
  </svg>
</body>
</html>

上面的程式碼演示了<filter>濾鏡的使用。

為rect矩形新增濾鏡效果，使用filter屬性引用對應的<filter>元素即可，引用方式如下：

[XML] 純文字檢視 複製程式碼
filter="url(#ant)

ant是<filter>的id屬性值。下面就分步介紹一下濾鏡的相關用法。

二.濾鏡的組成：

僅有<filter>元素是無法實現濾鏡效果的，具體的濾鏡效果是由它內部的濾鏡基元來定義。

如上面的程式碼：

[XML] 純文字檢視 複製程式碼
<feGaussianBlur in="SourceAlpha" stdDeviation="10" />

上面的程式碼會對原圖形進行高斯模糊處理。

對<rect>應用濾鏡效果，<feGaussianBlur>濾鏡基元是具體濾鏡效果生成的實際操作者，濾鏡基元需要一個輸入源，這個輸入是由in屬性規定，當然濾鏡基元也可以有一個輸出，由result屬性來規定。

看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      y="0" x="0"
      width="2" height="2">
      <feOffset in="SourceGraphic" dx="10" dy="10" result="offset" />
      <feGaussianBlur in="offset" stdDeviation="3" result="blur" />
    </filter>
  </defs>
  <ellipse
    cx="50" cy="60"
    rx="25" ry="15"
    fill="blue"
    filter="url(#ant)"/>
</svg>
</body>
</html>

由上面的程式碼可以看出，一個濾鏡基元的輸出可以作為另一個濾鏡基元的輸入。

二.filterUnits屬性：

此屬性和<linearGradient>的gradientUnits類似，當然還有其他元素也具有類似的屬性，不一一列舉。

它用來規定規定<filter>元素的x,y,width和height使用的座標空間。

x,y,width和height屬性用來規定濾鏡效果區域；超出此區域的濾鏡效果都是無效。

語法結構：

[XML] 純文字檢視 複製程式碼
filterUnits = "userSpaceOnUse | objectBoundingBox"

引數解析:

（1）.userSpaceOnUse:表示使用引用當前<filter>元素的元素的當前使用者座標系統。

（2）.objectBoundingBox:預設值，表示使用引用<filter>的元素的包圍盒為參考座標系統，取值是小數或者百分比 。

以上面的程式碼為例子做一下說明：

[XML] 純文字檢視 複製程式碼
y="0" x="0"

表示濾鏡區域相對於<ellipse>包圍盒沒有任何的偏移。

[XML] 純文字檢視 複製程式碼
width="2" height="2"

表示濾鏡區域的尺寸是包圍盒的兩倍。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<svg>
  <defs>
    <filter id="ant"
      y="0" x="0"
      width="0.8" height="0.8">
      <feOffset in="SourceGraphic" dx="10" dy="10"/>
    </filter>
  </defs>
  <rect
    x="20" y="20"
    width="90" height="90"
    fill="blue"
    filter="url(#ant)" />
  <rect x="20" y="20"
    width="90" height="90"
    fill-opacity="0.5"
    fill="blue"/>
</svg>
</body>
</html>

第二個矩形是輔助圖形，用來方便觀察效果。

通過上面的程式碼是不是就很容易理解相關屬性的作用了。

可以自行改動一下屬性值觀察對應的表現效果。

三.filterRes屬性：

此屬性定義了中間快取區域的大小，所以也定義了快取圖片的質量。

通常情況下，不需要提供這個值，瀏覽器自己會選取合適的值。

四.primitiveUnits屬性：

此屬性的作用與filterUnits屬性類似，它是用來規定濾鏡基元中尺寸屬性的座標系統。

語法結構：

[XML] 純文字檢視 複製程式碼
primitiveUnits = "userSpaceOnUse | objectBoundingBox"

關於此屬性，這裡就不採用程式碼例項演示了。

五.in和result屬性：

這兩個屬性在前面已經提到，result屬性比較簡單，這裡不作介紹。

in屬性值可以是如下幾個：

（1）.SourceGraphic：這個值代表使用當前的圖形元素作為操作的輸入。

（2）.SourceAlpha：這個值代表使用當前圖形元素的Alpha值作為操作的輸入。

（3）.BackgroundImage：這個值代表使用當前的背景截圖作為操作的輸入。

（4）.BackgroundAlpha：這個值代表使用當前的背景截圖的Alpha值作為操作的輸入。

（5）.FillPaint：這個值使用當前圖形元素的fill屬性的值作為操作的輸入。

（6）.StrokePaint：這個值使用當前圖形元素的stroke屬性的值作為操作的輸入。

特別說明：

除了可以顯式規定in的屬性值之外，也可以不不提供此屬性，在這種情況下，如果當前濾鏡基元是第一個濾鏡基元，那麼輸入源就是SourceGraphic。如果不是則使用前一個濾鏡基元作為輸入源。

六.訪問背景截圖：

由於篇幅原因，在這裡就不介紹了。

具體可以參閱svg enable-background屬性用法一章節。

相關文章