SVG - 濾鏡

SVG 使用<filter>元素來定義濾鏡。<filter>元素使用id屬性來唯一標識它。濾鏡在<def>元素內定義，然後透過它們的id被圖形元素引用。

SVG 提供了一套豐富的濾鏡。以下是常用濾鏡的列表。

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 用於投影的濾鏡
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

宣告

以下是<filter>元素的語法宣告。我們只展示了主要屬性。

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

屬性

序號	名稱和描述
1	filterUnits − 用於定義濾鏡效果區域的單位。它指定濾鏡中各種長度值的座標系以及定義濾鏡子區域的屬性。如果 filterUnits="userSpaceOnUse"，則值表示在使用“filter”元素時當前使用者座標系中的值。如果 filterUnits="objectBoundingBox"，則值表示在使用“filter”元素時引用元素邊界框的分數或百分比。預設為 userSpaceOnUse。
2	primitiveUnits − 用於定義濾鏡效果區域的單位。它指定濾鏡中各種長度值的座標系以及定義濾鏡子區域的屬性。如果 filterUnits="userSpaceOnUse"，則值表示在使用“filter”元素時當前使用者座標系中的值。如果 filterUnits="objectBoundingBox"，則值表示在使用“filter”元素時引用元素邊界框的分數或百分比。預設為 userSpaceOnUse。
3	x − 濾鏡邊界框的 x 座標。預設為 0。
4	y − 濾鏡邊界框的 y 座標。預設為 0。
5	width − 濾鏡邊界框的寬度。預設為 0。
6	height − 濾鏡邊界框的高度。預設為 0。
7	filterRes − 表示濾鏡區域的數字。
8	xlink:href − 用於引用另一個濾鏡。

示例

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

定義為 filter1 和 filter2 的兩個<filter>元素。
feGaussianBlur 濾鏡效果使用 stdDeviation 定義模糊效果及其模糊量。
in="SourceGraphic" 定義該效果適用於整個元素。
feOffset 濾鏡效果用於建立陰影效果。in="SourceAlpha" 定義該效果適用於 RGBA 圖形的 alpha 部分。
<rect> 元素使用 filter 屬性連結濾鏡。

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

帶陰影效果的濾鏡

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

輸出

在 Chrome 瀏覽器中開啟 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接檢視 SVG 影像，無需任何外掛。Internet Explorer 9 及更高版本也支援 SVG 影像渲染。

列印頁面