什么是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 属性调用该滤镜

示例：给圆形加高斯模糊

说明：

Quicktools Background Remover

Picsart推出的图片背景移除工具

31

查看详情

• in="SourceGraphic" 表示以原始图形为输入源
• stdDeviation 控制模糊强度，值越大越虚化
• x/y/width/height 扩展滤镜画布，默认只覆盖图形边界，模糊易被截断，建议设为 "-50%" 和 "200%"

常见滤镜原语与用途

每个 `` 标签实现一种基础图像操作，可串联组合：

• <feoffset dx="2" dy="2"></feoffset>：平移像素，常用于生成阴影偏移
• <fegaussianblur stddeviation="3"></fegaussianblur>：高斯模糊，制造柔边或景深感
• <feblend mode="multiply"></feblend>：混合两个输入图层（如原图 + 偏移阴影）
• <fecolormatrix type="saturate" values="0"></fecolormatrix>：调整饱和度、灰度、对比度等
• <fecomposite operator="in"></fecomposite>：按遮罩裁剪，实现文字镂空、蒙版效果

例如阴影效果 = 偏移 + 模糊 + 叠加：

关键注意事项

实际使用中容易忽略但影响效果和兼容性的要点：

• 浏览器支持不一致：IE 完全不支持；Safari 对部分原语（如 feDisplacementMap）支持有限；推荐优先测试 Chrome/Firefox/Edge
• 性能敏感：`` 计算开销大，`stdDeviation > 10` 在低端设备可能卡顿，动画中慎用
• 输入源选择很重要：in="SourceAlpha" 只取图形透明通道（适合做纯黑阴影），in="SourceGraphic" 是完整彩色图形
• CSS 与 SVG 滤镜可共存：比如先用 CSS 设置 `opacity`，再叠加 SVG 滤镜，但注意渲染顺序（CSS 层在 SVG 滤镜之前）

以上就是什么是SVG滤镜效果 SVG filter的XML语法的详细内容，更多请关注php中文网其它相关文章！