CSS 中 SVG 过滤器的奇怪错误

问题描述

我目前正在尝试寻找延迟加载图像的最佳方法。加载时，我想显示原始图像（内联/base64）的 10x10 小图像。由于这个微小的图像质量很差，我需要对其进行模糊处理，直到加载原始高分辨率图像。不幸的是，默认的 css-filter blur() 在我想要避免的图像周围添加了这个白色区域。

出于这个原因，我搜索并找到了这个 SVG 过滤器来制作没有明亮边框的模糊图像。

不幸的是，我在装有 Chrome 的 Mac 上出现了这种疯狂怪异的外观。在其他 MacBook 上也是如此。没有在 Windows 上测试。在 Safari 和 iPhone 上的 Chrome 中，我根本看不到过滤器。

你知道如何控制这个问题吗？

img {
  filter: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' aria-labelledby='title desc'%3E%3Cdefs%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#blur");
   margin: 50px;
}

<img 
    class="highres  " 
    src="https://images.unsplash.com/photo-1520206183501-b80df61043c2?ixid=MXwxMjA3fdb8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" height="600"
        
>

https://codepen.io/flexplosion/pen/abBdeRo

解决方法

问题是您在图像周围有半透明抗锯齿，您使用的过滤器正在将其转换为完全不透明，因此您会得到奇怪的颜色。如果您更改 tableValues 的参数 - 它将解决您的问题。

img {
  filter: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' aria-labelledby='title desc'%3E%3Cdefs%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E#blur");
   margin: 50px;
}

<img 
    class="highres  " 
    src="https://images.unsplash.com/photo-1520206183501-b80df61043c2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" height="600"
        
>