问在一个低质量的SVG掩模显示锯齿状边缘，有任何方法来修复使用抗混叠？

EN

你看到“锯齿状边缘”深色轮廓的原因是你做SVG的方式。您正在将黑色文本路径的两个副本堆叠在自己的上面。然后你把红色的水动画放在上面。

您的SVG如下所示：

<svg>
   <path with QURE (black)>
   <use that path again (black)>
   <water animation (red) using that path as a mask>
</svg>

您有三个反别名的元素直接堆叠在一起。其中两个是黑色的，一个是红色的。因此，在形状的边缘，你得到一个混合的黑色和红色半透明像素。

您可以通过将第一个<path>定义放在<defs>部分中以避免呈现，从而大大改善外观。

这让你有了这样的安排：

<svg>
   <use path with QURE shape (black)>
   <water animation (red) using that path as a mask>
</svg>

这很有帮助，但仍然在形状的边缘留下黑色和红色像素的混合。通过不绘制红色动画后面的黑色文本，您可以更好地改善外观。

要取得最好的效果，必须作出以下安排：

<svg>
  <g with QURE mask>
    <black rectangle background>
    <water animation (red)>
  </g>
</svg>

有了这样的安排，我们只将面罩一次应用于混合的黑水和红水动画。因此，您应该没有黑色锯齿边框，因为现在只有一组反别名像素。

演示代码与这些更改应用。