Is there a way to eliminate the overlap shadow between the element and its shadow when the element uses drop-shadow and has a semi-transparent color?

I want to use drop-shadow to implement a shadow effect for a Polygon. However, I noticed that when the polygon has a semi-transparent color, the shadow area becomes visible through the polygon. I would like the shadow to only appear near the border of the polygon, similar to the visual effect achieved using box-shadow. Thanks for any help!

Here is my codepen: 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>

A simple workaround is to apply the opacity on the container instead. However, this will cause the shadow to look lighter than those that are not semi-transparent, which could be acceptable depending on your need.

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

.semi-transparent-container {
  opacity: 0.5;
}

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

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

<svg class="semi-transparent-container" width=200px height=200px>
  <polygon points="50,50 60,180 180,160"> </polygon>
</svg>

<hr class="solid">

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

<svg class="semi-transparent-container" width=200px height=200px>
  <polygon points="50,50 60,180 180,160"> </polygon>
</svg>