使用SVG feDisplacementMap过滤器，我该如何消除别名？

Question

使用feDisplacementMap svg过滤器时，我的光滑svg线条变得锯齿状。我可能会把它渲染得很大然后缩小它，但SVG不应该能够消除别名吗？

Answer 1

SVG滤波器处理像素级别的输入，而不是矢量级别。就SVG滤波器而言，它已被交给一个RGBA像素的大矩形。结果可能看起来像素化并且从不消除锯齿，因为过滤器不知道矩形包含哪些伪像（文本，线等）。但是，有时您可以添加另一个或两个过滤器来解决此问题。创造性地解决这个问题的方法：

1）拍摄位移后的图形，用几个像素的半径进行模糊，然后将模糊混合回原始图形。

2）采用位移后图形，进行亮度到alpha转换，然后使用具有漫反射光效果的alpha贴图来添加假抗锯齿效果。

3）使用带有边缘检测值的convolvematrix从图形中提取边缘，模糊结果并将其混合回源图形。

根据您的图形，您可能可以使用侵蚀或扩张滤镜，但这往往会产生四四方方的高光，可能无效。当然，你总是可以在SVG中调整你的输入（使用笔画效果）来对你的源图形进行“预先抗锯齿”，所以结果看起来并不那么奇怪。

Answer 2

好的，我找到了自己问题的答案：filterRes属性：http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute

在我的测试中，在Chrome上，增加filterRes会大大减慢速度。