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

Avoiding the aliasing / thin "bleed between touching elements

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

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

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

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

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

还有什么事要做?

您可以使用 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 使用一些描边圆圈的动画蒙版。