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