应用过滤器前的抗锯齿SVG文本？

SVG过滤器将其源图像光栅化，这意味着过滤后的文本不会被消除混叠，从而产生锯齿状边缘

有解决办法吗？也许可以使用另一个过滤器来模拟抗锯齿，或者我可以在应用过滤器之前以某种方式对文本进行抗锯齿

相关过滤器：

<filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blur" />
  <feColorMatrix
    in="blur"
    mode="matrix"
    values="1 0 0 0 0
    0 1 0 0 0
    1 0 1 0 0
    0 0 0 15 -8"
    result="goo"
  />
  <feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>

---

作为过滤器输入的文本元素将在光栅化之前进行抗锯齿处理，并且过滤器将保留抗锯齿处理，除非您对alpha通道进行了某些操作

在本例中，您正在对alpha通道执行某些操作。feColorMatrix过滤器将alpha通道乘以15，然后减去8。这可以将不透明度小于8/15的任何像素转换为透明，从而去除大部分抗锯齿

如果要稍微平滑边缘，可以在末端添加另一个0.5或1单位标准偏差的feGaussianBlur。还有其他方法可以添加反走样，但这实际上取决于您尝试执行的操作。因为当前的过滤器什么都不做——我想它的目的是为了给某些东西设置动画

（另外-feColorMatrix应该具有

type='matrix'

而不是

mode='matrix'

-模式仅用于feBlend。）

更新：还可以添加各种技术来平滑边缘

原创的

带脆滤器的原汁原味

#2，末端标记了一个小模糊

#2带有标记的小模糊，但被剪裁为一像素周长

#2具有小模糊，但模糊的低不透明度部分剪裁为零

过滤
过滤
过滤
过滤
过滤

有解决办法吗？也许可以使用另一个过滤器来 模拟抗锯齿，或者我可以以某种方式对文本进行抗锯齿 在应用过滤器之前

这是关于这个问题的详细说明

作为折衷解决方案，您可以尝试：

选择对比度较小的颜色作为字母和背景的颜色

将属性

shape rendering=“crispEdges”

应用于字体

选择一种呈现更锐利边缘的字体

例如，您选择的font

font-family=“cursive”

如下所示：

你好

您的假设不正确。作为过滤器输入的文本元素将在光栅化之前进行抗锯齿处理，并且过滤器将保留抗锯齿处理，除非您对alpha通道进行了某些操作。您遇到的具体用例是什么？请提供一个最小的可验证测试用例（aka代码）–您将在顶部看到锯齿状的边缘

。它在较低的PPI屏幕上更为明显。我正在制作

feGaussianBlur

的

stdDeviation

动画。谢谢你的建议，我很快就会试试的@Michael Mullany非常感谢回答中的理论部分。向您提出的请求：我希望看到实际的例子来演示过滤器的这些效果。以下是几个您可以做的示例：@MichaelMullany非常感谢您提供的示例。