什么是SVG滤镜效果 SVG filter的XML语法

SVG滤镜效果是通过元素定义的图像后处理操作，需在中声明并用filter属性引用，支持模糊、阴影等效果，由feGaussianBlur等原语组成，注意兼容性与性能。

SVG滤镜效果是通过 <filter></filter> 元素定义的一组图像处理操作，用于给 SVG 图形添加模糊、阴影、光照、色彩变换等视觉效果。它不是直接绘制图形，而是对已有图形（如 <rect></rect>、<circle></circle>）的像素进行后处理，类似 Photoshop 中的图层样式。

滤镜必须定义在 <defs></defs> 容器内，通过 id 标识，再用 filter="url(#id)" 应用到目标元素上。

基本XML语法结构

一个最简可用的 SVG 滤镜包含三部分：容器定义、滤镜声明、图形引用。

• <defs></defs>：包裹所有可复用资源（滤镜、渐变、图案等）
• <filter></filter>：定义滤镜本身，需设 id，常用属性有 x、y、width、height（控制滤镜作用区域范围，避免被裁剪）
• <fegaussianblur></fegaussianblur>、<feoffset></feoffset> 等：滤镜原语（filter primitive），每个代表一种图像操作
• 目标图形元素（如 <circle></circle>）通过 filter 属性调用该滤镜

示例：给圆形加高斯模糊

说明：

标签： css svg photoshop 浏览器 edge safari blend