Svg 避免混叠/变薄；接触元件之间的出血

我有一个svg，它有多个笔划路径，在它们后面有一个矩形形状，它的形状是从这些路径中剪切出来的。实际上，冲程路径应该是矩形形状的“堵塞孔”

这样做的原因是，我想动画的路径，使他们被删除，揭示了什么是下面通过矩形形状的洞

这一切都很好，动画效果很好。问题是，在孔和路径笔划的外部之间有一个细细的空间，因此即使路径仍然存在，您也可以看到下面是什么。您可以在此处看到该功能的屏幕截图：

我如何避免这种情况发生？空间不在svg中，因为在页面上增大空间仍会使空间细线变细：

我认为这与别名有关，但我不知道如何应对它。我不能只对路径应用较厚的笔划，因为笔划开始向其他形状中渗透，如图所示：

还有什么可以做的呢？

您可以使用a而不是a，因为遮罩允许使用笔划来定义遮罩区域

<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>

---

这是一个使用了一些笔划圆圈的动画遮罩的示例。

您是否考虑过使用剪辑路径？这会避免你遇到的问题——因为它们是为这个场景而设计的。米歇尔穆兰尼，我确实考虑过了，但是从我能告诉你的，没有办法让一条小路进入一条修剪路径。由于动画，我需要保持路径是一条直线，每一个字母都有一个笔划，因为动画就是这样运行的（通过沿路径移动笔划）。不过，如果被证明是错的，我会很高兴的！似乎我需要的是类似于Adobe Illustrator中的透明遮罩的东西，它基本上使用alpha通道。你可以使用遮罩而不是剪辑路径，这样可以使用笔划来定义遮罩区域。下面是一个使用一些笔划圆的遮罩动画示例-。@ErikDahlström Ha！这正是我所指的，我不知道有SVG等价物。非常感谢！如果你想发布一个答案，我很乐意将其标记为解决方案！