当元素使用阴影且颜色为半透明时，有没有办法消除元素与其阴影之间的重叠阴影？

Question

我想使用 drop-shadow 来实现 Polygon 的阴影效果。但是，我注意到当多边形具有半透明颜色时，阴影区域通过多边形变得可见。我希望阴影仅出现在多边形的边界附近，类似于使用盒子阴影实现的视觉效果。感谢您的帮助！

这是我的代码笔：https://codepen.io/cactusxx/pen/qBgygqE

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

polygon {
  fill: rgb(122, 122, 0, 0.5);
  filter: drop-shadow(10px 10px 5px purple);
}

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

<svg width=200px height=200px>
  <polygon points="50,50 60,180 180,160"> </polygon>
</svg>

Answer 1

我没有直接向三角形应用阴影，而是围绕三角形的边缘创建了一条线，并将阴影应用到该线上。为了使阴影更明显，我添加了更多线条并将它们混合在一起。

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

<svg width="200px" height="200px">
  <defs>
    <filter id="lineBlur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
  </defs>
  <polygon points="50,50 60,180 180,160" fill="rgba(122, 122, 0, 0.5)">
  </polygon>
  <g filter="url(#lineBlur)">
    <polyline points="50,50 60,180 180,160 50,50" fill="none" stroke="purple" stroke-width="1"/>
    <polyline points="50,50 60,180 180,160 50,50" fill="none" stroke="purple" stroke-width="1" transform="translate(2, 2)"/>
    <polyline points="50,50 60,180 180,160 50,50" fill="none" stroke="purple" stroke-width="1" transform="translate(4, 4)"/>
  </g>
</svg>