半透明多边形使用drop-shadow时，如何消除元素与阴影的重叠显示？

问题核心：drop-shadow滤镜是基于元素的所有可见像素（包括半透明区域）生成阴影，所以半透明多边形会让阴影透出来；而box-shadow是给容器边框外添加阴影，不会透过内容。要实现类似效果，需要用分层多边形的方式处理：

1. 底层放置一个和目标形状完全一致的不透明多边形，仅用于生成drop-shadow
2. 上层放置半透明的目标多边形，覆盖底层多边形的填充部分，只露出边缘的阴影

修改后的代码如下：

.rect1 {
  width: 150px;
  height: 150px;
  background-color: rgb(122, 122, 0, 0.5);
  margin: 50px;
  box-shadow: 10px 10px 10px purple;
}

/* 底层生成阴影的多边形 */
.polygon-shadow {
  fill: rgb(122, 122, 0); /* 不透明基础色，用于生成完整阴影轮廓 */
  filter: drop-shadow(10px 10px 5px purple);
}

/* 上层半透明显示的多边形 */
.polygon-fill {
  fill: rgb(122, 122, 0, 0.5);
}

<div class="rect1">
</div>

<svg width=200px height=200px>
  <!-- 底层：仅负责生成阴影 -->
  <polygon class="polygon-shadow" points="50,50 60,180 180,160"></polygon>
  <!-- 上层：半透明显示的主体多边形 -->
  <polygon class="polygon-fill" points="50,50 60,180 180,160"></polygon>
</svg>

原理说明 #

• 底层的polygon-shadow用不透明颜色填充，确保drop-shadow能生成完整的阴影轮廓
• 上层的polygon-fill完全覆盖底层多边形，半透明填充只会显示自身颜色，同时挡住底层多边形的填充部分，只留下边缘的阴影，视觉效果就和box-shadow一致了

如果担心基础色影响阴影色调，也可以把底层多边形填充设为纯黑色（fill="#000"），阴影颜色仅由滤镜参数控制，效果完全一致。

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