我們先來學(xué)習(xí)圖形的模糊效果。

給 SVG 圖形添加特殊效果，需要通過 filter 元素來實(shí)現(xiàn)，filter 是過濾器的意思，它是一個(gè)雙標(biāo)簽，基本語法為尖角號(hào) filter，尖角號(hào) /filter。filter 元素里面包含一個(gè)或多個(gè)效果濾鏡。

filter 元素有一個(gè)必要的 id 屬性，用于識(shí)別過濾器，圖形通過這個(gè) id ，指向要使用的過濾器。

filter 元素都是在 defs 元素中定義的。defs 元素是 definitions [?d?f??n???nz] 的簡稱，它也是一個(gè)雙標(biāo)簽，基本語法為尖角號(hào) defs，尖角號(hào) /defs。

模糊效果可以通過 feGaussianBlur 濾鏡來創(chuàng)建，這是一個(gè)高斯模糊效果。它需要定義在 filter 標(biāo)簽里，是一個(gè)雙標(biāo)簽，基本語法為尖角號(hào) feGaussianBlur，尖角號(hào) /feGaussianBlur。

feGaussianBlur 通過 stdDeviation 屬性定義模糊的數(shù)量，值是一個(gè)數(shù)字，值越大模糊程度越高。

我們來做一個(gè)例子。

打開編輯器，新建一個(gè) blur-drop-shadow.html 文件，補(bǔ)全基礎(chǔ)代碼，在 body 里添加一個(gè) svg 標(biāo)簽，定義屬性 width 等于 110，height 等于 110。

在 svg 里添加 rect 標(biāo)簽，給它定義屬性 width 等于 90，height 等于 90，stroke 等于 green，stroke-width 等于 3，fill 等于 yellow。保存文件。

在瀏覽器中打開，一個(gè)黃色背景、綠色邊框的小矩形就創(chuàng)建好了。

面返回編輯器，在 svg 里面頂部添加 defs 元素，在 defs 元素里添加 filter 標(biāo)簽，給 filter 定義一個(gè)濾鏡的起始點(diǎn)坐標(biāo) x 等于 0，y 等于 0。

然后在 filter 標(biāo)簽里添加 feGaussianBlur 標(biāo)簽，給它定義一個(gè) stdDeviation 屬性，值為 15。

模糊濾鏡定義好后，需要應(yīng)用到圖形上：首先在 filter 標(biāo)簽上添加一個(gè) id 屬性，值為 f1。

然后在 rect 標(biāo)簽上添加 filter 屬性，值為 url 小括號(hào) # f1 url(#f1) ，這里的 f1 就是在 filter 上定義的 id 屬性值。保存。

返回瀏覽器，刷新。高斯模糊效果實(shí)現(xiàn)了。

我們再來學(xué)習(xí)圖形的陰影效果。

陰影效果可以通過 feOffset 濾鏡和feBlend濾鏡來創(chuàng)建，其原理是將一個(gè)SVG 圖形、圖像或元素，在 xy 平面上做一定的偏移。它需要定義在 filter 標(biāo)簽里，是一個(gè)雙標(biāo)簽，基本語法為尖角號(hào) feOffset，尖角號(hào) /feOffset。

給 feOffset 定義 dx 屬性，值是一個(gè)數(shù)字，表示陰影在 x 軸上的偏移量，再定義一個(gè) dy 屬性，值也是數(shù)字，表示陰影在 y 軸上的偏移量。

再給 feOffset 定義一個(gè) in 屬性，表示陰影圖像的來源，如果定義一個(gè)黑色的陰影，值可以設(shè)置為 SourceAlpha ，如果使用原始圖像作為陰影，值可以設(shè)置為 SourceGraphic。

最后，還需要在偏移的圖像上混合原始圖像，要應(yīng)用 feBlend 標(biāo)簽，它也是一個(gè)雙標(biāo)簽，基本語法為：尖角號(hào) feBlend，尖角號(hào) /feBlend。給它定義 in 屬性，值為 SourceGraphic，也就是原始圖像。

我們來做一個(gè)例子。

回到編輯器，在上個(gè) svg 結(jié)尾處添加一個(gè) br 標(biāo)簽。回車換行。

添加一個(gè)新的 svg 標(biāo)簽，屬性 width 等于 140，height 等于 140。

在 svg 標(biāo)簽里添加 rect 標(biāo)簽，定義矩形的屬性 width 等于 90，height 等于 90，stroke 等于 green，stroke-width 等于 3，fill 等于 yellow。保存。

返回瀏覽器，刷新。一個(gè)小矩形創(chuàng)建好了。

返回編輯器，在 svg 里的頂部添加 defs 元素，在 defs 元素里添加 filter 標(biāo)簽，給 filter 定義濾鏡起始坐標(biāo)屬性： x 等于 0，y 等于 0。定義濾鏡的寬高屬性：width 等于 200，height 等于 200。

在 filter 標(biāo)簽里添加一個(gè) feOffset 標(biāo)簽，定義屬性 in 等于 SourceAlpha，給圖形制作一個(gè)黑色陰影。定義陰影的偏移屬性 dx 等于 20，dy 等于 20。

再添加一個(gè) feBlend 標(biāo)簽，定義 in 屬性，值為 SourceGraphic，實(shí)現(xiàn)在偏移的圖像上混合原始圖像。

陰影濾鏡定義好后，需要應(yīng)用到圖形上：首先在 filter 標(biāo)簽上添加一個(gè) id 屬性，值為 f2。

注意 id 屬性的值，要保證唯一性，不然頁面里的圖形就不知道具體使用哪個(gè)濾鏡了。

然后在 rect 標(biāo)簽上添加 filter 屬性，值為 url 小括號(hào) # f2 url(#f2) 。保存。

回到瀏覽器，刷新，陰影效果實(shí)現(xiàn)了。不過你一定不滿意這個(gè)投影，因?yàn)樗擦?，得模糊一下?/p>

返回編輯器，在 filter 里添加一個(gè)新的標(biāo)簽 feGaussianBlur，定義屬性 stdDeviation，值為 10。保存。

回到瀏覽器，刷新，模糊的陰影效果實(shí)現(xiàn)了。