濾鏡效果
在某些情況下，基本形狀無法提供您實現某些效果所需的靈活性。例如，要建立合理的投影效果，就不能簡單地使用漸變組合。濾鏡是 SVG 建立複雜效果的機制。
一個基本的例子是為 SVG 內容新增模糊效果。雖然可以使用漸變來實現基本的模糊，但要實現更高階的模糊效果，則需要使用模糊濾鏡。
示例
濾鏡由 <filter> 元素定義，該元素應放置在 SVG 檔案的 <defs> 部分中。在濾鏡標籤之間是一系列的基本運算：建立在先前運算基礎上的基本操作（如模糊、新增燈光效果等）。要將建立的濾鏡應用於圖形元素，請設定 filter 屬性。
<svg
width="250"
viewBox="0 0 200 85"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<!-- Filter declaration -->
<filter
id="MyFilter"
filterUnits="userSpaceOnUse"
x="0"
y="0"
width="200"
height="120">
<!-- offsetBlur -->
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<!-- litPaint -->
<feSpecularLighting
in="blur"
surfaceScale="5"
specularConstant=".75"
specularExponent="20"
lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite
in="specOut"
in2="SourceAlpha"
operator="in"
result="specOut" />
<feComposite
in="SourceGraphic"
in2="specOut"
operator="arithmetic"
k1="0"
k2="1"
k3="1"
k4="0"
result="litPaint" />
<!-- merge offsetBlur + litPaint -->
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="litPaint" />
</feMerge>
</filter>
</defs>
<!-- Graphic elements -->
<g filter="url(#MyFilter)">
<path
fill="none"
stroke="#D90000"
stroke-width="10"
d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
<path
fill="#D90000"
d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana">
<text x="52" y="52">SVG</text>
</g>
</g>
</svg>
步驟 1
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feGaussianBlur> 獲取 in "SourceAlpha"，它是源圖形的 alpha 通道；應用 4 的模糊；並將 result 儲存在名為 "blur" 的臨時緩衝區中。
步驟 2
<feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feOffset> 獲取 in "blur"，我們之前建立的；將結果 "4" 向右移動，並將 "4" 向下移動；並將 result 儲存在緩衝區 "offsetBlur" 中。這兩個基本運算剛剛建立了一個投影。
步驟 3
<feSpecularLighting
in="offsetBlur"
surfaceScale="5"
specularConstant=".75"
specularExponent="20"
lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feSpecularLighting> 獲取 in "offsetBlur"，生成燈光效果，並將 result 儲存在緩衝區 "specOut" 中。
步驟 4
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
第一個 <feComposite> 獲取 in "specOut" 和 "SourceAlpha"，遮蔽 "specOut" 的結果，以便結果不超過 "SourceAlpha"（原始源圖形），並覆蓋 result "specOut"。
步驟 5
<feComposite
in="SourceGraphic"
in2="specOut"
operator="arithmetic"
k1="0"
k2="1"
k3="1"
k4="0"
result="litPaint" />
第二個 <feComposite> 獲取 in "SourceGraphic" 和 "specOut"，將 "specOut" 的結果新增到 "SourceGraphic" 的頂部，並將 result 儲存在 "litPaint" 中。
