带有清晰边缘的 SVG 模糊答案

【问题标题】：SVG Blur with crisp edges带有清晰边缘的 SVG 模糊
【发布时间】：2016-07-13 16:51:12
【问题描述】：

您好，我正在尝试使用 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 实现吗？如果没有，我可以尝试走另一条路吗？

谢谢！

【问题讨论】：

感觉你想模糊图像并对其应用（锐利的）多边形蒙版

标签： svg

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：