SVG 濾鏡用來向形狀和文本添加特殊的效果。
在 SVG 中翻斟，可用的濾鏡有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
注釋：您可以在每個 SVG 元素上使用多個濾鏡
高斯模糊（Gaussian Blur）
<filter> 標(biāo)簽用來定義 SVG 濾鏡。<filter> 標(biāo)簽使用必需的 id 屬性來定義向圖形應(yīng)用哪個濾鏡揩环？
<filter> 標(biāo)簽必須嵌套在 <defs> 標(biāo)簽內(nèi)蝗砾。<defs> 標(biāo)簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義洞就。
例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>代碼解釋
- <filter> 標(biāo)簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
- filter:url 屬性用來把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時掀淘，必須使用 # 字符
- 濾鏡效果是通過 <feGaussianBlur> 標(biāo)簽進行定義的旬蟋。fe 后綴可用于所有的濾鏡
- <feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
- in="SourceGraphic" 這個部分定義了由整個圖像創(chuàng)建效果
