使用 SVG feDisplacementMap 过滤器，我如何抗锯齿？答案

【问题标题】：Using an SVG feDisplacementMap filter, how do I anti-alias?使用 SVG feDisplacementMap 过滤器，我如何抗锯齿？
【发布时间】：2021-03-02 07:45:10
【问题描述】：

当使用 feDisplacementMap svg 过滤器时，我平滑的 svg 线条变得锯齿状。我可能可以将它渲染大然后缩小它，但是 SVG 不应该能够抗锯齿吗？

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

SVG 过滤器在像素级别而不是矢量级别处理输入。就 SVG 过滤器而言，它被交给了一个 RGBA 像素的大矩形来处理。置换贴图的结果可能看起来像素化，因为过滤器不知道被置换的边缘在哪里——就它而言，它只是像素。（用于抗锯齿的旧半透明像素也已被替换。）但是，有时您可以添加另一个或两个过滤器来解决由此产生的任何问题。解决这个问题的创造性方法：

获取置换后的图形，用几个像素的半径对其进行模糊处理，然后将模糊处理重新混合到原始图形中。
获取置换后图形，进行亮度到 Alpha 的转换，然后使用带有漫反射光照效果的 Alpha 贴图添加虚假的抗锯齿光照效果。
使用带有边缘检测值的卷积矩阵从图形中提取边缘，模糊该结果并将其混合回源图形中。

根据您的图形，您可能可以使用侵蚀或扩张滤镜，但这往往会产生四四方方的高光并且可能不起作用。当然，您可以随时调整您在 SVG 中的输入（使用笔触效果）以“预抗锯齿”您的源图形，这样结果就不会那么奇怪了。

【讨论】：