feDropShadow 是 SVG 中用于快速添加投影效果的滤镜原语，等价于 feOffset + feGaussianBlur + feMerge 组合，具有 dx、dy、stdDeviation 和 color 四个属性，语法简洁且语义清晰。
SVG 中的 feDropShadow 是一个便捷的滤镜原语，用于快速添加带偏移、模糊和颜色的投影效果。它本质上是 feOffset + feGaussianBlur + feMerge 的语法糖，但结构更简洁、语义更清晰。
feDropShadow 的基本结构与属性
<feDropShadow> 必须嵌套在 <filter> 元素内，不能单独使用。它有四个关键属性：
- dx：水平偏移量（单位像素），正值向右，负值向左
- dy：垂直偏移量（单位像素），正值向下，负值向上
- stdDeviation：高斯模糊半径，控制阴影软硬程度（可单值或双值如 "2 4"）
-
color：阴影颜色（支持 rgba，例如
rgba(0,0,0,0.3)）
标准用法示例（内联滤镜）
以下代码为一个矩形添加柔和、偏右下的灰色投影：
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg"><defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="4" dy="4" stdDeviation="3" color="rgba(0,0,0,0.25)" />
</filter>
</defs>
<rect x="40" y="30" width="100" height="60" fill="#4a90e2" filter="url(#shadow)" />
</svg>
与手动组合滤镜的等效性对比
feDropShadow 在功能上完全等价于以下三步手动实现：
立即学习“前端免费学习笔记（深入）”；
- 用
feOffset将原始图形副本平移（dx/dy） - 用
feGaussianBlur对平移后的副本模糊（stdDeviation） - 用
feMerge将模糊副本与原始图形叠加（通常用feMergeNode指定顺序）
使用 feDropShadow 可避免冗余节点、减少代码量，并提升可读性；但若需精细控制（如多层阴影、遮罩融合或动态调整中间步骤），仍建议拆解为原语组合。
实用注意事项
实际开发中需注意几个细节：
-
filter 区域范围：务必设置
x/y/width/height属性，否则默认裁剪可能导致阴影被截断 -
颜色透明度：推荐用
rgba()而非fill-opacity，因后者会影响整个元素而非仅阴影 -
性能表现：
stdDeviation > 8或大幅扩大 filter 区域可能影响渲染性能，尤其在移动端 - 浏览器兼容性：Chrome 58+、Firefox 55+、Safari 13.1+、Edge 79+ 均支持；旧版 Safari 需回退至手动滤镜链
