SVG 本身不支持 CSS 的 box-shadow: inset，但可通过 SVG 实现高质量、可定制的内阴影效果；本文详解如何用 feComponentTransfer、feGaussianBlur 和 feComposite 等滤镜原语构建逼真的内阴影，并提供开箱即用的代码示例。
svg 本身不支持 css 的 `box-shadow: inset`，但可通过 svg `
为 SVG 图形添加内阴影（inset shadow）是前端开发中常见的视觉需求——例如增强图标立体感、模拟按钮按压效果或提升 UI 层次。但由于 SVG 是矢量图形，其渲染模型与 HTML 盒模型不同，CSS 的 box-shadow: inset 对 。唯一可靠且兼容性良好的方案是使用 SVG 原生滤镜（
核心思路是：
✅ 将原始图形的 Alpha 通道反相（使内部变透明、外部变不透明）
✅ 对该蒙版进行高斯模糊和偏移，生成阴影区域
✅ 将模糊后的阴影与原始图形进行合成（operator="in"），确保阴影仅出现在图形内部
✅ 最后将阴影与源图形（SourceGraphic）合并，完成内阴影叠加
以下是完整、可直接运行的实现代码（已适配你的房屋图标）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SVG 内阴影示例</title>
<style>
* {
background-color: lightcoral;
text-align: center;
}
.homeButton {
fill: white;
margin-top: 12em;
}
</style>
</head>
<body>
<svg class="homeButton" xmlns="http://www.w3.org/2000/svg" height="10em" viewBox="0 0 576 512">
<!-- 定义内阴影滤镜 -->
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
<!-- 步骤1：提取 Alpha 通道并反相（1→0, 0→1），得到“外部为白、内部为黑”的遮罩 -->
<feComponentTransfer in="SourceAlpha">
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<!-- 步骤2：对反相遮罩进行高斯模糊（形成柔边阴影） -->
<feGaussianBlur stdDeviation="40" />
<!-- 步骤3：向下偏移阴影（模拟光源在上方时的自然内阴影） -->
<feOffset dx="0" dy="50" result="offsetblur" />
<!-- 步骤4：填充阴影颜色（深红，可根据主题调整 RGB） -->
<feFlood flood-color="rgb(20, 0, 0)" result="color" />
<!-- 步骤5：用 offsetblur 作为蒙版裁剪 color → 得到带模糊的阴影形状 -->
<feComposite in2="offsetblur" in="color" operator="in" />
<!-- 步骤6：再次用原始 Alpha 裁剪，确保阴影严格限制在图形轮廓内 -->
<feComposite in2="SourceAlpha" operator="in" />
<!-- 步骤7：将原始图形与阴影合并（feMergeNode 顺序决定图层上下关系） -->
<feMerge>
<feMergeNode in="SourceGraphic" /> <!-- 底层：原始图形 -->
<feMergeNode /> <!-- 上层：内阴影 -->
</feMerge>
</filter>
<!-- 应用滤镜的路径 -->
<path filter="url(#inset-shadow)"
d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
</svg>
</body>
</html>? 关键参数说明与调优建议：
- stdDeviation="40"：控制阴影柔化程度，值越大越弥散；建议 10–50 之间微调
- dy="50"：控制阴影深度与方向（正值=向下偏移，适合顶部光源；负值可模拟底部光源）
- flood-color="rgb(20, 0, 0)"：阴影颜色，推荐使用比背景略深的暗色（如 rgb(30, 30, 30) 或 #1a1a1a），避免过重失真
- x/y/width/height：务必设为 "-50%" 和 "200%"，确保滤镜区域覆盖图形全尺寸，防止边缘截断
⚠️ 注意事项：
- 滤镜需定义在
- 不要给
- 若阴影不显示，请检查浏览器是否禁用 SVG 滤镜（极罕见），或确认 viewBox 与实际尺寸匹配；
- 移动端 Safari 对复杂滤镜性能较敏感，生产环境建议 stdDeviation ≤ 20 并测试帧率。
通过此方法，你不仅能为房屋图标添加精致的内阴影，还可复用于任意 SVG 路径——真正实现「一次编写，随处生效」的专业级视觉增强。
