如何通过将滤镜与蒙版结合使用 SVG 来实现渐进式模糊？

Question

我正在尝试实现类似于图像上的线性模糊效果，但使用 just svg，没有 css!!!

请注意图像的顶部是如何完全模糊的，但底部不是。

在 SVG 中可以使用 feGaussianBlur. The gradient can be used with 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>

享受逐渐模糊的茶卡汗

如何通过将滤镜与蒙版结合使用 SVG 来实现渐进式模糊？

How to achieve a Progressive Blur using SVG by combining a filter with a mask?

svg

web-frontend

svg-filters