Jquery 如果低质量SVG掩码显示锯齿状边缘，是否有任何方法可以使用抗锯齿进行修复？

我制作了一个SVG面具动画。我遇到的问题是SVG的边缘是“锯齿状”的，当动画出现时，我可以看到遮罩周围有一条轻微的黑色边缘。（非常轻微。我见过质量更好的动画GIF。使用SVG我认为会更干净）

寻找较软边缘的解决方案。如果这意味着我需要使用PNG蒙版或应用某种类型的过滤效果？我很乐意找到任何解决办法

<mask id="text-mask">
<use x="0" y="0" xlink:href="#text" opacity="1" fill="#fff"/>
</mask>

<use x="0" y="0" xlink:href="#text" fill="#0d0d0d"/>

<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-400"     y="0" width="6000" height="650"/>

---

您看到“锯齿边”黑色轮廓的原因是您使用SVG的方式。您正在将黑色文本路径的两个副本堆叠在它们的顶部。然后将“红水”动画置于这些动画之上

您的SVG如下所示：

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

有三个抗锯齿元素直接堆叠在另一个元素之上。其中两个是黑色的，一个是红色的。因此，在形状的边缘上，您将得到黑色和红色半透明像素的混合

通过将第一个

定义放在

部分中，使其不被渲染，可以大大改善外观

这就给你留下了这样的安排：

<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>

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

最好的结果将通过以下安排实现：

<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>

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