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

Question

我有一个svg，它有多个描边路径，后面有一个矩形形状，它们的路径形状被切掉。有效地，描边路径应该是“堵塞孔洞”。在矩形形状。

这样做的原因是我想要对路径进行动画处理以便将它们删除，从而通过矩形形状的孔显示出下面的内容。

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

如何避免这种情况发生？空间不在svg中，因为在页面上使其更大仍然有空间细线：

我认为它与锯齿有关，但不知道如何对抗它。我不能在路径上应用更粗的笔划，因为然后笔划开始渗入其他形状，如下所示：

还有什么可做的？

Answer 1

您可以使用mask代替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动画面具的{{3}}，使用了一些描边圆圈。