如何通过组合滤镜和蒙版来使用 SVG 实现渐进模糊？

Question

我试图实现像图像上的线性模糊效果，但仅使用 svg，不使用 css ！

请注意图像的顶部完全模糊，但底部却没有。

在 SVG 中，可以使用feGaussianBlur来实现模糊效果。渐变可以与LinearGradient一起使用。

这两者如何结合？

Answer 1

虽然可以在不使用双图像的情况下完全在过滤器中完成此操作，但由于 Firefox 和 Chrome 处理低不透明度操作的方式，该解决方案可能会出现问题。因此，这是使用双重图像来实现此目的的另一种且直接的方法。请注意，您必须修剪图像边缘以获得干净的图像，因为 feGaussianBlur 会产生边缘淡入淡出。

<svg width="800px" height="600px">
  <defs>
    <linearGradient id="progFade" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" stop-color="black"/>
      <stop offset="60%" stop-color="white"/>      
    </linearGradient>
    
    <mask id="progFadeMask" >
        <rect x="0%" y="0%" width="100%" height="100%" fill="url(#progFade)"  />
      <mask>
    
   <filter id="blurme" x="0%" y="0%" width="100%" height="100%">
     <feGaussianBlur stdDeviation="15" result="blurry"/>
    </filter>

     <clipPath id="outerclip">
       <rect x="20" y="20" width="460" height="380" fill="black">
      </clipPath>
    </defs>

<g clip-path="url(#outerclip)">
      
 <image x="0" y="0" filter="url(#blurme)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
  <image x="0" y="0" mask="url(#progFadeMask)" xlink:href="http://cps-static.rovicorp.com/3/JPG_400/MI0003/890/MI0003890640.jpg" width="494" height="400"/>
       </g>
</svg>

享受逐渐模糊的查卡汗