SVG 實現動態模糊動畫效果

製作SVG動態模糊效果，並將其應用於HTML元素的常規JS或CSS動畫。

動態模糊是一種廣泛使用於動態影像和動畫的技術，它能使動作看起來更加平滑自然。

下面將介紹如何對水平或垂直的轉換製作出類似的動態模糊效果

由於默認的CSS模糊濾鏡不支持定向模糊，所以我們得使用SVG濾鏡。

使用高斯濾鏡模糊feGaussianBlur

stdDeviation屬性用於設置模糊強度，並且可以佔用兩個參數，用於水平和垂直方向的模糊。

將濾鏡應用到一個元素上：

對於動態模糊效果，我們仍得通過JS動態更新每個幀的濾鏡。

首先，我們必須選擇並將濾鏡存儲在一個變數中，以便以後可以訪問它。由於jQuery與SVG元素不兼容，所以我們需要使用本機JS函數選擇元素：

然後設置強度，即改變濾鏡原語的stdDeviation屬性。例如，要設置一個水平12px的模糊：

blurFilter.setAttribute("stdDeviation","12,0");