避免接触元素之间的混叠/薄“流血”

Question

我有一个 svg，它有多个描边路径，在它们后面有一个矩形形状，它的形状是从它们中切出的。实际上，矩形中的描边路径应该是 "plugging the holes"。

这样做的原因是我想为路径设置动画，以便它们被擦除，通过矩形中的孔显示下面的内容。

一切都很好，动画效果很好。问题是在路径笔划的孔和外部之间有一条细细的 space，因此即使路径仍然存在，您也可以看到下面的内容。您可以在此处查看屏幕截图：

如何避免这种情况发生？ space 不在 svg 中，因为在页面上放大它仍然会使 space 发际线变细：

我认为它与别名有关，但不知道如何解决它。我不能只对路径应用较粗的笔触，因为这样笔触就会开始渗透到其他形状中，如下所示：

还有什么事要做？

Answer 1

您可以使用 mask instead of a clip-path，因为蒙版允许使用描边来定义蒙版区域。

<mask id="strokemask" maskContentUnits="objectBoundingBox" 
      x="0" y="0" width="100%" height="100%">
  <circle cx="0.5" cy="0.5" r="0.1" stroke="white" fill="white" 
          stroke-width="0.02"/>
  <circle cx="0.5" cy="0.5" r="0.15" stroke="white" fill="none" 
          stroke-width="0.03"/>
  <circle cx="0.5" cy="0.5" r="0.22" stroke="white" fill="none" 
          stroke-width="0.05"/>
  <circle cx="0.5" cy="0.5" r="0.3" stroke="white" fill="none" 
          stroke-width="0.06"/>
</mask>

这是一个 live example 使用一些描边圆圈的动画蒙版。

避免接触元素之间的混叠/薄“流血”

Avoiding the aliasing / thin "bleed between touching elements

graphics

svg

svg-animate