jquery - 如果低质量的 SVG 蒙版显示锯齿状边缘，有什么方法可以使用抗锯齿来修复吗？

Question

我制作了一个 SVG mask 动画。我遇到的问题是 SVG 的边缘“参差不齐”，当动画出现时我可以看到蒙版周围有轻微的黑色边缘。(非常轻微。我见过质量更好的动画 GIF。我认为使用 SVG它会更干净)。

寻找更柔和边缘的解决方案。如果这意味着我需要使用 PNG 蒙版或应用某种类型的滤镜效果？我很乐意提供任何解决方案。

CODEPEN

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

Answer 1

您看到“锯齿状边缘”深色轮廓的原因是您制作 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>

通过这种安排，我们仅将蒙版应用到组合的黑色和红色水动画中。所以你应该没有黑色锯齿状边框，因为现在只有一组抗锯齿像素。

Demo codepen with these changes applied.