SVG模糊，边缘清晰

Question

您好我正在尝试使用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>

当我将模糊应用于多边形时，我会失去清晰的边缘！这就是它最终看起来像：

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

这是否可以通过SVG进行，如果没有，我可以尝试下去另一条路径吗？

谢谢！

Answer 1

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

<svg viewBox="0 0 379 314" width="379" height="314"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur stdDeviation="10" />
    </filter>
    <clipPath id="c">
      <polygon points="379,100 379,314 0,314 0,0" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.stack.imgur.com/E6Wyo.jpg"
         width="479" height="359" x="-50" y="-20"
         filter="url(#blur)" clip-path="url(#c)"/>
</svg>

Answer 2

您可以使用clipPath删除模糊的边缘：

<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>