如何通過將濾鏡和蒙版組合來實現使用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>

享受逐步模糊茶卡汗