1

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

4

2 回答 2

1

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

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

于 2012-10-09T03:00:12.173 回答
1

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

  1. 取置换后的图形，用几个像素的半径对其进行模糊处理，然后将模糊处理重新混合到原始图形中。

  2. 使用置换后的图形，进行亮度到 alpha 的转换，然后使用带有漫反射光照效果的 alpha 贴图添加虚假的抗锯齿光照效果。

  3. 使用带有边缘检测值的卷积矩阵从图形中提取边缘，模糊该结果并将其混合回源图形中。

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

于 2012-10-08T22:42:05.833 回答