CSS 中 SVG 过滤器的奇怪错误

Posted 2023-03-06

【中文标题】CSS 中 SVG 过滤器的奇怪错误

【英文标题】：Weird Bug with SVG Filters in CSS

【发布时间】：2021-05-10 07:01:13

【问题描述】：

我目前正在尝试找到延迟加载图像的最佳方法。加载时，我想显示一个 10x10 的原始图像（内联/base64）。由于这个微小的图像质量很差，我需要对其进行模糊处理，直到加载原始的高分辨率图像。不幸的是，默认的 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" 
        
>

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

【问题讨论】：

如果你有一个非常小的图像并且你想模糊它使用image-rendering: crisp-edges;请查看这篇文章：/css-tricks:image-rendering

@enxaneta 将所有内容都切换到这个看起来很完美的图像渲染。尤其是这个像素化选项，根据网站的不同，我认为这也很酷。想要创建它作为答案？

随意回答您自己的问题。我很高兴为它投票

【参考方案1】：

问题是您使用的滤镜正在将图像转换为完全不透明的图像周围有半透明的抗锯齿，因此您会得到奇怪的颜色。如果您更改 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" 
        
>