fedropshadow 是 svg 中用于快速添加投影效果的滤镜原语，等价于 feoffset + fegaussianblur + femerge 组合，具有 dx、dy、stddeviation 和 color 四个属性，语法简洁且语义清晰。
SVG 中的 feDropShadow 是一个便捷的滤镜原语，用于快速添加带偏移、模糊和颜色的投影效果。它本质上是 feOffset + feGaussianBlur + feMerge 的语法糖，但结构更简洁、语义更清晰。
feDropShadow 的基本结构与属性
<fedropshadow></fedropshadow> 必须嵌套在 <filter></filter> 元素内，不能单独使用。它有四个关键属性：
- dx：水平偏移量（单位像素），正值向右，负值向左
- dy：垂直偏移量（单位像素），正值向下，负值向上
- stdDeviation：高斯模糊半径，控制阴影软硬程度（可单值或双值如 "2 4"）
-
color：阴影颜色（支持 rgba，例如
rgba(0,0,0,0.3)）
标准用法示例（内联滤镜）
以下代码为一个矩形添加柔和、偏右下的灰色投影：
与手动组合滤镜的等效性对比
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 需回退至手动滤镜链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
