如何通过将滤镜与蒙版结合使用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>

享受逐渐模糊的Chaka Khan