fedropshadow在多数浏览器不生效，因firefox完全不支持、safari需v16.4+且开启实验功能；chrome/edge支持，但须设filter宽高防裁剪，兼容旧版需用feoffset+fegaussianblur+feflood组合。
feDropShadow 为什么在多数浏览器里直接写不生效
因为 feDropShadow 是 SVG 2 规范引入的简化滤镜原语，但截至 2024 年底，Chrome 和 Edge 已支持，Firefox 仍**完全不支持**（会静默忽略），Safari 仅从 v16.4+ 开始支持且需启用实验性功能。直接写 <fedropshadow></fedropshadow> 标签，在 Firefox 中阴影根本不会出现，也没有报错提示。
实操建议：
- 若需兼容 Firefox 或旧 Safari，必须退回到等效的
<feoffset></feoffset>+<fegaussianblur></fegaussianblur>+<femerge></femerge>组合写法 - 若只面向 Chrome/Edge 最新版，可放心用
feDropShadow，代码更短、语义更清晰 - 务必在
<filter></filter>外层设置合理的x/y/width/height，否则阴影可能被裁剪（默认滤镜区域仅略大于原始图形）
用 feDropShadow 添加投影的最小可行写法
以下是最简可用模板，注意所有属性都必须显式声明（没有默认值）：
<svg width="0" height="0" style="position: absolute;"><defs><filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"><fedropshadow dx="2" dy="2" stddeviation="3" flood-color="#000" flood-opacity="0.3"></fedropshadow></filter></defs></svg>
关键点说明：
-
dx/dy控制阴影偏移量（单位是用户坐标，非像素），负值向左/上偏移 -
stdDeviation决定模糊程度，值越大越弥散；设为0会得到硬边阴影（但此时实际效果等同于无模糊的位移矩形，视觉上不自然） -
flood-color和flood-opacity共同决定阴影颜色与透明度，不设则默认为black和1 - 外部
<filter></filter>的x/y/width/height必须扩大，否则模糊后的阴影边缘会被截断
和传统三步滤镜写法的参数对应关系
当你需要降级兼容时，feDropShadow 的参数要手动映射到三个基础滤镜中：
-
dx→<feoffset></feoffset>的dx属性 -
dy→<feoffset></feoffset>的dy属性 -
stdDeviation→<fegaussianblur></fegaussianblur>的stdDeviation属性 -
flood-color+flood-opacity→<feflood></feflood>的对应属性（注意：这里不能省略<feflood></feflood>，否则没颜色）
典型降级写法示例（效果等价）：
<filter id="shadow-fallback"><feoffset dx="2" dy="2" result="offset"></feoffset><fegaussianblur in="offset" stddeviation="3" result="blur"></fegaussianblur><feflood flood-color="#000" flood-opacity="0.3" result="color"></feflood><fecomposite in="color" in2="blur" operator="in" result="shadow"></fecomposite><femerge><femergenode in="shadow"></femergenode><femergenode in="SourceGraphic"></femergenode></femerge></filter>
应用到 HTML 元素时容易忽略的坑
把 SVG 滤镜挂到普通 HTML 元素（如 <div> 或 <code><img>）上时，有三点极易出错：
- SVG
<filter></filter>必须定义在页面内（或外链 SVG 文件中），不能通过 CSS@import引入；推荐内联在顶部或使用<object></object>加载外部 SVG - CSS 中引用要用完整 URL，例如：
filter: url(#shadow)（当前页内）或filter: url("sprite.svg#shadow")（外部文件），漏掉括号或引号会失效 - 对
<img>应用滤镜时，若图片跨域，部分浏览器（尤其 Safari）会因安全策略阻止滤镜渲染——此时只能服务端处理或转为<svg><image></image></svg>内联
真正麻烦的不是写法，而是不同浏览器对“滤镜作用域”的解释差异：Firefox 把 url(#id) 当作文档局部引用，而旧版 Safari 曾要求绝对路径。现在虽已收敛，但上线前仍建议在目标浏览器里真机验证一次。
