SVG 滤镜

使用几层 SVG 滤镜的叠加，其实可以非常轻松的实现一个马赛克效果滤镜。

并且，SVG 滤镜可以通过 css filter，轻松的引入。

代码其实也非常的简单，SVG 定义一个滤镜，利用多层滤镜的叠加效果实现一个马赛克效果，然后，通过 CSS filter 引入，可以运用在任何元素上：

<img src="任意无需缩放的原图.png" alt="">
<svg>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="8" height="8"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate"radius="5"/>
  </filter>
</svg>

img {
    width: 300px;
    height: 300px;
    filter: url(#pixelate);
}

这样，我们就得到了一个马赛克效果。

CSS/SVG 实现马赛克的局限性

当然，CSS/SVG 滤镜实现马赛克的局限性在于，如果你是不想给用户看到原图的，那么在客户端直接使用这个方式相当于直接把原图的暴露了。

因为 CSS/SVG 滤镜的方式是在前端进行图片马赛克化的，而且需要原图。

链接: https://fly63.com/article/detial/11340