如何为无容器形状的SVG添加非box-shadow类阴影效果？

方案1：用SVG内置滤镜直接实现 #

不用修改原有形状结构，直接在SVG内部定义阴影滤镜，给目标形状应用即可：

• 首先在SVG根标签内添加<defs>（如果没有的话），写入阴影滤镜定义：

<defs>
  <!-- 自定义阴影：偏移量、模糊度、颜色、透明度可按需调整 -->
  <filter id="shapeShadow" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="3" dy="3" stdDeviation="4" flood-color="#222" flood-opacity="0.4"/>
  </filter>
</defs>

• 找到SVG里的目标形状元素（比如<path>、<polygon>、<ellipse>等），给它加上filter="url(#shapeShadow)"属性。

方案2：复制形状模拟阴影 #

通过“底层阴影层+原形状层”的方式模拟，完全不依赖滤镜逻辑：

• 复制目标形状的代码，把复制后的形状填充改为深灰色，设置透明度；
• 给复制的形状添加模糊效果，再偏移一定距离；
• 将阴影层放在原形状的代码前面（SVG是代码顺序决定层级）。
  示例代码：

<!-- 阴影层：偏移+模糊+半透明深灰 -->
<path d="原形状的路径字符串" fill="#333" opacity="0.5" filter="url(#shadowBlur)" transform="translate(2,2)"/>
<!-- 原形状 -->
<path d="原形状的路径字符串" fill="#yourOriginalColor"/>

<defs>
  <filter id="shadowBlur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
</defs>

方案3：CSS伪元素辅助（SVG嵌入HTML时用） #

如果SVG是嵌入到HTML页面中的（内联或用<object>/<embed>），可以给SVG的包裹容器加伪元素做阴影：

.svg-wrap {
  position: relative;
  display: inline-block;
}
.svg-wrap::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  filter: blur(5px);
  z-index: -1;
  border-radius: inherit; /* 适配SVG的圆角 */
}
/* 避免SVG遮挡伪元素交互 */
.svg-wrap svg {
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Rogerto