Question

我做了一个SVG蒙版动画。我遇到的问题是SVG的边缘是＃34;锯齿状的＆＃34;当动画进来时，我可以在面具周围看到一个轻微的黑色边缘。（它非常轻微。我看过质量更好的动画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

您看到“锯齿状边缘”黑色轮廓的原因是由于您完成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蒙版显示锯齿状边缘，有没有办法使用抗锯齿来修复？

1 个答案: