具有清晰边缘的SVG模糊

您好，我正在尝试使用

fegaussianblur

在SVG多边形元素上创建模糊，这是我得到的结果

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 379 313.9" style="width:150px; height: auto;position: absolute; top: -100px;" xml:space="preserve" >
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur stdDeviation="10" />
    </filter>
  </defs>
  <polygon points="379,100 379,313.9 0,313.9 0,0" />
  <style>
    fill: #f8f8f8;
    fill-opacity: 0.75;
    filter: url(#blur);
    stroke: none;
  </style>
</svg>

填充：#F8；
填充不透明度：0.75；
过滤器：url（#模糊）；
中风：无；

当我对多边形应用模糊时，我会丢失清晰的边！这就是它最终的样子：

我真的希望它看起来更像：

这是否可能通过SVG实现，如果不可能，是否还有其他途径可以尝试

---

谢谢

您可以使用剪贴画删除模糊边缘：

<svg version="1.1">
  <filter id="blur" x="0" y="0">
    <feGaussianBlur stdDeviation="10" />
  </filter>
  <clipPath id="mask">
    <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
  </clipPath>
  <image clip-path="url(#mask)" filter="url(#blur)" height="100" width="100" xlink:href="img.jpg" />
</svg>

---

以下是应用于图像元素的剪辑路径和模糊过滤器的示例

---

感觉像是要模糊图像并对其应用（锐利的）多边形遮罩