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

问题描述：

我试图实现一个像图像上的线性模糊效果，但使用只是svg，没有CSS！如何通过将滤镜和蒙版组合来实现使用SVG的渐进模糊？

通知图像的顶部是如何完全模糊，但底部不大。

在SVG模糊效果可以使用feGaussianBlur实现。梯度可以与linearGradient一起使用。

这两者如何结合？

放在非模糊图像上的模糊图像。然后通过使用包含线性渐变的遮罩来改变模糊版本的可见性。 –

答

完全可以在不使用双图像的情况下在过滤器中完成此操作，但由于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>

享受逐步模糊茶卡汗

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

相关推荐