SVG滤镜入门：feGaussianBlur与feDropShadow的视觉效果
作者：袖梨
2026-06-24
SVG滤镜是对CSS视觉控制的升级，通过feGaussianBlur和feDropShadow等原语实现可拆解、可控的阴影与模糊效果。
SVG滤镜不是CSS的替代品，而是对视觉控制力的升级。它让你能真正“拆解”一个效果——比如阴影，不再是一行drop-shadow()完事，而是明确告诉浏览器：先取轮廓、再偏移、再模糊、最后叠加。这种可拆解性，正是feGaussianBlur和feDropShadow的价值起点。
feGaussianBlur：模糊不是“糊”，是可控的柔焦
它用高斯函数对图像做加权平均，生成自然过渡的模糊边缘。关键参数只有stdDeviation（标准差），数值越大越虚，但不是线性增长——2和4的视觉差异比4和6更明显。它默认作用于整个元素（in="SourceGraphic"），但常配合in="SourceAlpha"只模糊透明通道，专为阴影打基础。
- 单独使用时，适合做毛玻璃背景或弱化干扰元素
- 搭配
result属性可输出中间结果，供后续滤镜节点调用 - 移动端慎用大值（>8），避免渲染卡顿；建议结合
will-change: filter做性能提示
feDropShadow：一行代码，三层逻辑
它不是“简化版阴影”，而是一个封装好的三步流水线：feOffset → feGaussianBlur → feMerge。所以它的四个属性dx、dy、stdDeviation、color，分别对应偏移方向、模糊软硬、颜色浓度——没有隐藏行为，改哪项就动哪块。
- 必须嵌套在
<filter>内，不能独立存在 -
stdDeviation支持双值写法（如"2 4"），实现横向纵向不同强度的模糊 - 颜色支持
rgba()，透明度直接控制阴影“厚度”，比CSS的drop-shadow()更直观
组合使用：从单层到立体感
单个feDropShadow只能出一层影子。要模拟真实光照（比如顶部高光+底部浓影），就得并列多个feDropShadow，或拆解成原语手动组合。例如：
- 先用
feGaussianBlur in="SourceAlpha"生成纯黑软边轮廓 - 再用
feOffset dx="-2" dy="-2"拉出浅色高光 - 最后
feComposite operator="over"把高光叠在主影上
这种链式结构让阴影有纵深，也方便用JS动态改dx模拟光照角度变化。
实际接入：HTML元素也能用
不用把所有内容重写成SVG。给任意HTML元素（比如<div>或<img>）加上CSS：filter: url(#my-filter);，就能复用SVG里定义的滤镜。注意两点：
-
<svg>定义部分建议放在页面顶部或<head>里，设width="0" height="0" style="position:absolute"隐藏但保功能 - 滤镜区域默认裁剪，若阴影被截断，需调整
<filter>的x、y、width、height属性（常用"-20%" "140%"留足空间）
