如果低质量的SVG掩模显示锯齿状边缘,有没有办法使用抗锯齿来修复？

Question

我做了一个SVG蒙版动画.我遇到的问题是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>

通过这种安排,我们只将蒙版应用于组合的黑色和红色水动画.所以你应该没有黑色的锯齿边界,因为现在只有一组抗别名像素.

应用这些更改的演示代码集.