如果您不知道SVG(Scalable Vector Graphics)是什么，它是XML的一種應(yīng)用程序，用于描述二維圖形和應(yīng)用程序。它是一種旗艦技術(shù)，因?yàn)樗试S我們創(chuàng)建可縮放圖形而不必讓這些圖形失真。另一方面，CSS(Cascading Style Sheets)也是一種標(biāo)記語言，它被用來定義HTML元素在瀏覽器中如何呈現(xiàn)。

現(xiàn)在，如果您結(jié)合這兩種技術(shù)，您可以使用CSS為SVG添加濾鏡，使您的SVG圖像變得更具視覺效果。

/* 添加模糊濾鏡 */
.blur-filter{
filter: blur(3px);
}
/* 添加閾值白色濾鏡 */
.white-threshold-filter{
filter: url("#white-threshold-filter");
}
/* 添加投影濾鏡 */
.shadow-filter{
filter: url("#shadow-filter");
}
/* 添加顏色濾鏡 */
.color-filter{
filter: url("#color-filter");
}

上面代碼中的 'blur-filter' 將在SVG圖像上應(yīng)用一個(gè)3像素的高斯模糊。而 'white-threshold-filter', 'shadow-filter' 和 'color-filter' 分別是SVG根據(jù)其相應(yīng)ID定義的閾值白色、陰影和顏色濾鏡。在這種情況下，我們使用了已定義的標(biāo)識(shí)符作為CSS的'filter'值。

如果您想定義自己的自定義濾鏡，這里是一個(gè)例子：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="myFilter">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feOffset dx="8" dy="8" result="offsetblur" />
<feFlood flood-color="rgba(0,0,0,0.5)" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="10" y="10" width="100" height="100" fill="#3CB371" filter="url(#myFilter)" />
</svg>

上面的代碼演示了如何定義自定義濾鏡，它是由高斯模糊、顏色填充和對(duì)象疊加組成的。結(jié)果是，一個(gè)帶有綠色填充和陰影的矩形，使SVG圖像更具視覺吸引力。