应用遮罩时，圆的一部分被切断

Question

我想创建一个笔划为 12、半径为 20 的圆，并对其应用蒙版。问题在于，圆圈的顶部、底部、左侧和右侧被切掉，就像应用了方形蒙版一样，或者笔划不知何故溢出。我们有时会看到这样的问题，例如，当笔划与半径相比太宽（没有遮罩）时。但在这种情况下，12/20 并不是不合理的。我也尝试扩大数字，但问题仍然存在。

这可能是一个错误，但它看起来在不同浏览器之间或多或少是一致的（我在 Ubuntu 上测试了 Firefox、Chromium 和 Opera，在 Android 上测试了 Firefox 和 Google Chrome）。

在示例中，第一个圆有问题，第二个和第三个圆看起来不错，分别具有较大的半径或较小的笔划宽度。我对每个应用一个掩码，该掩码不应屏蔽任何内容（当然，我的用例要复杂得多，但这是最简单的表示形式）。

svg {
  border: solid 1px black;
}

<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>

Answer 1

调整描边宽度的蒙版大小。

svg {
  border: solid 1px black;
}

<svg viewBox="0 0 180 80" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
  <defs>
    <mask id="mask01" x="-30%" y="-30%" width="160%" height="160%">
      <rect width="180" height="80" fill="white"/>
    </mask>
  </defs>
  <circle mask="url(#mask01)" cx="30" cy="40" r="20" stroke-width="12" />
  <circle mask="url(#mask01)" cx="90" cy="40" r="26" stroke-width="12" />
  <circle mask="url(#mask01)" cx="150" cy="40" r="20" stroke-width="8" />
</svg>