在低质量 SVG 蒙版显示锯齿状边缘的情况下，有没有办法使用抗锯齿修复？答案

【问题标题】：Where a low quality SVG mask shows jagged edges, is there any way to fix using anti-aliasing?在低质量 SVG 蒙版显示锯齿状边缘的情况下，有没有办法使用抗锯齿修复？
【发布时间】：2016-04-19 19:10:31
【问题描述】：

我制作了一个 SVG 蒙版动画。我遇到的问题是 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"/>

【问题讨论】：

标签： jquery html css svg gsap

【解决方案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.

【讨论】：