可以使用SVG滤镜对像素进行像素化处理吗？

Question

注意:我不能使用JavaScript,因为这是针对CSS Zen Garden的挑战.请不要建议JS库.

我有2个想法,我没有取得进展:

1. 使用SVG滤镜只是像素化dang图像; 之后我一直在玩<feMorphology operator="erode"/>和对比,但看起来很糟糕.

2. 将图像过滤为较小,然后使用CSS image-rendering将其缩放并且全部是块状的.困难的部分是步骤A; 我找不到任何缩放输入的过滤操作.

我错过了什么吗？如何使用SVG滤镜获得"像素化"效果？

Answer 1

如果你有正确的"魔法"displaMap,你可以像素化图像.随意使用下面提到的那个(由Zoltan Fegyver提供).请注意,下面的示例代码具有托管在其他域上的置映贴图图像.这对Firefox不起作用 - 因此对于生产代码,您需要从与源图形文件相同的域提供的置换贴图图像.

(Firefox首先实施即将推出的Filters 1.0规范中的安全措施)

<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600" color-interpolation-filters="sRGB">
  <defs>
    <filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
      <!--Thanks to Zoltan Fegyver for figuring out pixelation and producing the awesome pixelation map. -->
      <feGaussianBlur stdDeviation="2" in="SourceGraphic" result="smoothed" />
      <feImage width="15" height="15" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32648/pixelate-map-5.png" result="displacement-map" />
      <feTile in="displacement-map" result="pixelate-map" />
      <feDisplacementMap in="smoothed" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="50" result="pre-final"/>
      <feComposite operator="in" in2="SourceGraphic"/>
    </filter>
  </defs>

  <image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>

Answer 2

Michael Mullany 的答案中的过滤器对我不起作用，相反，我找到了 Taylor Hunt 的这个过滤器：

<svg>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="2" width="2"/>
    <feComposite width="10" height="10"/>
    <feTile result="a"/>
    <feComposite in="SourceGraphic" in2="a" operator="in"/>
    <feMorphology operator="dilate" radius="5"/>
  </filter>
</svg>

（以与其他过滤器相同的方式使用它：通过为图像提供属性filter="url(#pixelate)"）

在此 CodePen 中运行：https://codepen.io/tigt/pen/aZYqrg

然而，这两个过滤器似乎都无法处理绘图不占据整个 viewBox 的 SVG。