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

Question

我做了一个SVG遮罩动画。我遇到的问题是 SVG 的边缘是 "jagged" 当动画出现时我可以看到蒙版周围有轻微的黑色边缘。（非常轻微。我见过质量更好的动画 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"/>

Answer 1

您看到 "jagged edge" 深色轮廓的原因是您制作 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.

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

Where a low quality SVG mask shows jagged edges, is there any way to fix using anti-aliasing?

html

css

jquery

svg

gsap